State, state Hook과 Props

citron03·2022년 1월 12일
0

React

목록 보기
5/39
  • State는 컴포넌트 내부에서 변할 수 있는 값을 의미한다.
    사용자가 텍스트를 작성하거나 체크 박스를 선택하면 변하는 값을 의미한다.
    그리고 우리는 state hook을 이용하여 state와 같은 특징들을 쉽게 사용할 수 있다.
  • props는 외부에서 받은 값으로, 변하지 않는 값이다.
    상위 컴포넌트로부터 전달받은 값인 props는 객체형태로, 읽기 전용인 데이터이다.

state hook

import { useState } from "react";

const [isChecked, setIsChecked] = useState(false);
// 구조 분해 할당으로 useState의 값을 받아온다.
// [상태 변수, 상태 변화 함수] = useState(초기값);

function clickCheck() {
   setIsChecked(true);
}

 return (
    <div>
      <input type="checkbox" checked={isChecked} onChange={clickCheck} />
      <span>{isChecked ? "선택되었습니다." : "선택하지않았습니다."}</span>
    </div>
  );
  • state는 state = false와 같이 강제로 변환할 수 없다.
  • state가 변해야 페이지는 다시 렌더링되는데, 배열이 state일때는 새로운 배열(깊은복사된) 이어야 페이지가 다시 렌더링된다. (같은 배열은 주소가 같기에 변화를 감지하지 못한다.)

Props

  • 리액트의 데이터는 기본적으로 위에서 아래로만 전달된다.
  • 만약 두 개의 children 컴포넌트가 하나의 상태에 접근하고자 한다면, 두 컴포넌트의 공통 조상의 컴포넌트에 상태가 위치해야 한다.
  • props 사용하기
function Parent() {
  return (
    <div className="parent">
      <h1>안녕하세요</h1>
      <Child name={"Hi"} />
    </div>
  );
};

function Child(props) {
  return (
    <div className="child">{props.name}</div>
  );
};
  • 또는 구조분해 할당으로 받아올 수 있다.
function Parent() {
  return (
    <div className="parent">
      <h1>안녕하세요</h1>
      <Child name={"Hi"} />
    </div>
  );
};

function Child( { name } ) {
  return (
    <div className="child">{name}</div>
  );
};
  • 태그 사이에 값을 넣고 props.children으로 값을 받아올 수도 있다.
function Parent() {
  return (
    <div className="parent">
      <h1>안녕!</h1>
      <Child>{"Hi!"}</Child>
    </div>
  );
};

function Child(props) {
  return (
    <div className="child">{props.children}</div>
  );
};
  • 하위 컴포넌트에서 상위 컴포넌트로 데이터를 보내기 위해서 함수를 사용한다.
import { useState } from "react";

function Parent() {

  const [inputValue, changeValue] = useState("");
  
  return (
    <div className="parent">
      <h2>{inputValue}</h2>
      <Child changeValue={changeValue}/>
    </div>
  );
};

function Child( {changeValue} ) {

  const getValueFromInput = (event) => {
    changeValue(event.target.value);
  }

  return (
    <input type="text" onChange={getValueFromInput}/>
  );
};

State와 Props를 구분하는 것은 중요하다.

어떤 데이터를 state로 두어야 할까?

  • 부모 컴포넌트로부터 props를 통해 전달되면 state가 아닙니다.
  • 시간이 지나도 변하지 않는다면 state가 아닙니다.
  • 컴포넌트 안의 다른 state나 props를 가지고 계산할 수 있다면 state가 아닙니다.
profile
🙌🙌🙌🙌

0개의 댓글