(React) Props & State

 

Props

• 속성을 나타내는 데이터
• component에서 component로 전달하는 데이터
  
  • 부모 component에서 자식 component로 전달 ( 위에서 아래 component로 )
• 받는 component에서는 데이터를 변경할 수 없고 최상위 부모 component에서 props를 변경할 수 있다
  • 자식(받는) component 입장에서는 읽기 전용

 

// App.jsx

import React from "react";
import Child from "./Child";

function App() {
	return <Child id="doublejj" name="jjh" />;
}

export default App;

• App componet에서 Child component로 각각 id, name의 이름으로 props를 넘겨준다

 

하위(자식) Component에서 props 전달받기

// props 전체를 매개변수로 받아 온다

import React from "react";

function Child(props) {
	return <div>{props.id}와 {props.name}<div>;
}
export default Child;

 

// props를 구조분해할당으로 받아 온다
import React from "react";

function Child({id, name}) {
	return <div>{id}와 {name}<div>;
}

export default Child;

• Child component에서 App component가 보낸 props를 전달받는 방법은 위 코드들처럼 두 가지가 있다
  
  • 하나는 props를 전체를 전달받아 온다
  • 다른 하나는 구조분해할당으로 받아 온다

 

 

State

• component 내부에서 선언하며 내부에서 값을 변경할 수 있다
• component 내부에서 변경 가능한 데이터를 관리해야 할 때 사용
• 값을 저장하거나 변경할 수 있는 객체로 보통 이벤트와 함께 사용
• 사용 방식
  • class component → component 자체가 state를 지니는 방식
  • function component → useState라는 함수, Hook을 통해 사용
• 여러 개의 component 간의 state를 공통 조상 component로 끌어올려 하향식 데이터 흐름을 이용 (react 단방향 흐름)

 

import { useState } from "react";

function Example() {
  // let num = 0;
  const [num, setNum] = useState(0);

  increaseNum = () => {
    // num = num +1;
    setNum(num + 1);
  };

  return <div onClick={increaseNum()}>{num}</div>;
}
export default Example;

 

import { useState } from "react";

function Example() {
  // let num = 0;
  const [num, setNum] = useState(0);

  increaseNum = () => {
    // num = num +1;
    setNum((state) => state + 1);
  };

  return <div onClick={increaseNum()}>{num}</div>;
}
export default Example;

• state 값을 변경하기 위해서는 반드시 useState Hook의 set함수를 사용해야 한다
  • 임의의 로 변경 시 react가 인식하지 못한다, 즉 React가 리랜더링을 하지 않는다