리액트 - state, event 활용하여 select option에 따른 style 속성, 이미지 바꿔주기

 

Synthetic Event (합성 이벤트)란?

 

- 모든 웹 브라우저에서 이벤트를 동일하게 처리하기 위한 react 고유의 이벤트 wrapper객체(Native Event 포함)

 

- 웹 브라우저의 이벤트 시스템은 브라우저 별로 다름, 그렇기 때문에 각 브라우저 별로 이벤트를 다르게 지정해야 하지만 react에서 는 모든 웹 브라우저에서 이벤트를 동일하게 처리하기 위해 합성 이벤트 제공

 

 

state(상태)란?

- 컴포넌트 내부에서 생성, 변경 가능한 데이터로, 지속적으로 변경이 일어나는 값을 변경하기 위해 사용한다.

 

---

 

 

 위의 두 개념을 활용하여 리액트에서 style 속성값에 접근하여 값을 바꿔보겠다. 사용자와의 상호작용을 통해 style 속성 안에 넣어둔 변수이자 state의 값을 변경할 수 있다. 흔히 button을 누르면 값이 변경되는 방법을 사용하곤 하는데 버튼을 여러개 만들지 않는 이상 선택지가 다양하지 않다. 이러한 단점을 개선하기 위해 select태그와 option 태그를 활용하여 사용자에게 다양한 선택지를 주는 동시에 확실하게 눈에 보이는 시각적 효과를 보여줄 수 있다. 

 

 

 

 오늘 만들어 볼 것은 바로 아래 동영상과 같다!

 

state, event 기본 활용 방법

 전체코드는 다음과 같다.

 

import React, { useState } from 'react';

import apple from '../../apple.jpeg';

import peach from '../../peach.jpeg';

export default function HandlerEx4_1() {

  const [colors, setColors] = useState({

    color: 'black',

    backgroundColor: 'white',

    fruits: apple,

    contents: 'txt',

  });

  return (

    <div>

      <div>

        과일 :

        <select

          onChange={(e) => {

            setColors((colors) => {

              return { ...colors, fruits: e.target.value };

            });

          }}

          name="fruits"

        >

          <option value={apple}>사과</option>

          <option value={peach}>복숭아</option>

        </select>

        배경색:{' '}

        <select

          name="backgroundColor"

          onChange={(e) => {

            setColors((colors) => {

              return { ...colors, backgroundColor: e.target.value };

            });

          }}

        >

          <option value="red">빨강</option>

          <option value="orange">주황</option>

          <option value="yellow">노랑</option>

          <option value="green">초록</option>

          <option value="blue">파랑</option>

          <option value="navy">남색</option>

          <option value="purple">보라색</option>

        </select>

        글자색 :{' '}

        <select

          name="color"

          onChange={(e) => {

            setColors((colors) => {

              return { ...colors, color: e.target.value };

            });

          }}

        >

          <option value="red">빨강</option>

          <option value="orange">주황</option>

          <option value="yellow">노랑</option>

          <option value="green">초록</option>

          <option value="blue">파랑</option>

          <option value="navy">남색</option>

          <option value="purple">보라색</option>

        </select>

        {/* 화살표함수 */}

        <input

          type="text"

          onChange={(e) => {

            setColors((colors) => {

              return { ...colors, contents: e.target.value };

            });

          }}

        />

      </div>

      <div className="imgSpace">

        <img src={colors.fruits} width={100} height={100} alt="" />

      </div>

      <div

        style={{ backgroundColor: colors.backgroundColor, color: colors.color }}

        className="txtSpace"

      >

        {colors.contents}

      </div>

    </div>

  );

}

 

 

 

 

먼저 select문을 작성함으로써 사용자에게 보여줄 select문 구조를 완성한다. 예시는 아래와 같다. 여기서 select의 value 값을 지정할 때 state의 value값으로 지정함과 동시에 style 속성에 넣었을 때 색이 적용될 수 있도록 색의 영문이름을 고대로 넣어주었다. 배경색 뿐만 아니라, 글자 색, 이미지도 다양한 코드에 쓰일 것을 고려하여 value 값을 설정한다.

 

(여기서, react의 map함수를 활용하면 같은 코드의 반복을 줄이는 데 도움이 된다.)

 

배경색: <select>

          <option value="red">빨강</option>

          <option value="orange">주황</option>

          <option value="yellow">노랑</option>

          <option value="green">초록</option>

          <option value="blue">파랑</option>

          <option value="navy">남색</option>

          <option value="purple">보라색</option>

        </select>

 

 

 

다음으로, state를 설정한다.

 

const [colors, setColors] = useState({

    color: 'black',

    backgroundColor: 'white',

    fruits: apple,

    contents: 'txt',

  });

 

 

 

사용자가 특정 value 값을 가지는 option을 선택할 때마다 state의 value값 또한 변경될 수 있도록 setColors 함수를 활용하고, 이벤트 객체를 받아와 사용자가 선택한 옵션의 value값을 가리킬 수 있도록 한다.

 

과일 :

        <select

          onChange={(e) => {

            setColors((colors) => {

              return { ...colors, fruits: e.target.value };

            });

          }}

          name="fruits"

        >

 

 

 

 

---

 

 

 여기서 객체 구조분해할당을 하면 작성해야하는 코드를 줄일 수 있지만, 변수명이 속성값과 비슷하여 헷갈릴 수 있으니 주의가 필요할 것 같다. 기본적인 활용법이지만 이를 응용하고 더하여 다양한 기능을 구현할 수 있을 것이다. 무언가를 배울 때 이 코드를 활용하여 어떠한 것을 구현해낼 수 있는지 추가적으로 생각해 놓으면 많은 도움이 될 것이다.