[React] 구조 분해 할당(feat. useState)

1. 구조 분해 할당?

구조 분해 할당 문법은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다. (출처: MDN)

쉽게 말해 배열이나 객체를 쪼개어 필드 값을 변수에 담을 수 있다. 아래의 예제를 살펴보자.

2. 배열 구조 분해

const fruits = ['apple', 'berry', 'banana'];
const [one, two, three] = fruits;
console.log(one, two, three); // 'apple', 'berry'. 'banana'

const age = [20, 25, 40];
const ['Kim', 'Lee'] = age;
console.log('Kim', 'Lee'); // 20, 25

선언이 분리 되어도 구조 분해를 통해 값을 할당할 수 있다.

let Kim, Lee;

[Kim, Lee] = [20, 25];
console.log(Kim); // 20
console.log(Lee); // 25 

3. 객체 구조 분해

const apple = {
  type: 'fruit',
  color: 'red',
  shape: 'circle'
}

const { type, color, shape } = apple;
console.log(type, color, shape); // 'fruit', 'red', 'circle'

4. 리액트에서의 구조 분해 할당

4-1. useState

function Login() {
  const [inputValue, setInputValue] = useState({
    email: '',
    password: '',
  });
  
  const { eamil, password } = inputValue;

  const handleInput = event => {
    const { name, value } = event.target;
    setInputValue({
      ...inputValue,
      [name]: value,
    });
  };
  
  return (
    <form className='loginInput'>
    <input name='email' onChange={handleInput} />
    <input name='password' onChange={handleInput} />
   </form>
 );
}

4-2. 함수 컴포넌트 안에서의 구조 분해 할당

아래 코드는 Main.js와 Main.js의 자식 컴포넌트인 Components.js 파일이다.

// Main.js
function Main() {
  return (
    <>
    <ul className="message-list">
              {comments.map((elements, index) => {
                return <ComponentsNaeun key={index} elements={elements} />;
              })}
        </ul>
    </>


// Components.js
function Components(props) {
  return (
    <>
      <li className="message-list-box">
        <div>
          <span className="message-list-id">ex id</span>
          <span className="message-list-content">{props.elements}</span>
        </div>
        <button className="message-list-delete-button">X</button>
      </li>
    </>
  );
}

위처럼 props.key를 사용하지 않고 구조 분해 할당을 통해 props 값을 전달할 수 있다.

(1) 인자 안에서의 구조 분해 할당

function Components({ elements }) {
  return (
    <>
      <li className="message-list-box">
        <div>
          <span className="message-list-id">ex id</span>
          <span className="message-list-content">{elements}</span>
        </div>
        <button className="message-list-delete-button">X</button>
      </li>
    </>
  );
}

(2) 본문 안에서의 구조 분해 할당

function Components(props) {
  const { elements } = props;
  return (
    <>
      <li className="message-list-box">
        <div>
          <span className="message-list-id">ex id</span>
          <span className="message-list-content">{elements}</span>
        </div>
        <button className="message-list-delete-button">X</button>
      </li>
    </>
  );
}