리액트, Props 와 State 활용 기초

위코드 파운데이션 과정을 들으며 정리한 내용입니다.

부모 컴포넌트로부터 전달 받은 객체 형태 데이터를 자식 컴포넌트에 전달하는 props 와 UI 에 보여줄 정보를 결정할 때 사용하는 상태값 state 를 같이 활용해보겠습니다.

아래 예제를 보면,
color state 를 useState 를 활용해 선언하고, red 라는 문자열을 초기값으로 할당했습니다. 그리고 changeColor 라는 함수는 실행하면 setColor 를 이용해 컬러를 바꾸어 줍니다. 이제 Props 로 두 데이터를 자식 컴포넌트에게 전달합니다. Props 는 어떠 값도 자식 컴포넌트로 넘겨 줄 수 있으므로 state 값도 자식 컴포넌트에게 넘겨줄 수 있습니다.

import React, { useState } from "react";
import Child from "./Child";

const Parents = () => {
	const [color, setColor] = useState("red");
  
  	const changeColor = () => {
    	setColor("blue");
    };
  	return (
      <>
          <div>부모 컴포넌트</div>
          <Child color={color} changeColor={changeColor} />
      </>
    );
};

export default Parents;

자식 컴포넌트는 객체 형태의 데이터 props를 받아 아래처럼 사용하면 됩니다.

import React from "react";

const Child = (props) => {
	return (
    	<>
      		<div>자식 컴포넌트</div>
      		<p>{ props.color }</p>
			<button onClick={ props.changeColor }>색상 변경</button>
      	</>
    );
};

export default Child;

자심 컴포넌트에서 발생한 이벤트로 부모 컴포넌트가 변경되고 그 값이 자식 컴포넌트에 반영됩니다. 이것을 state 끌어올리기 라고 합니다. 이런 동작은 자식 컴포넌트에서 생성해 각각 반영할 수 있지만, 이렇게 하면 데이터의 단방향성(위에서 아래로) 때문에 자식 컴포넌트의 프롭스 값을 부모 컴포넌트에게 전달할 수 없습니다. 부모와 자식이 하나의 데이터를 사용한다면 부모 컴포넌트에서 자식요소로 전달해야 합니다.