1/26 일일 정리 React States/Props

Props

- 컴포넌트의 속성으로, 성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값이다.

- 부모 컴포넌트(상위 컴포넌트)로 부터 전달받는 값이다.

   React 컴포넌트는 props를 함수의 전달인자처럼 전달받아 이를 기반으로 화면에 표시한다.

- props는 모든 형태의 값을 받을 수 있도록 객체형태로 되어있다.

- props는 읽기 전용이다. 외부로부터 전달받는 값이기 때문에 함부로 변경할 수 없다.

 

How to use props

⓵ 하위 컴포넌트로 전달하고자 하는 값과 속성을 정의한다.

⓶ props를 이용하여 정의된 값과 속성을 전달한다.

⓷ 전달받은 props를 렌더링 한다.

 

function Parent() {
  return (
    <div className="parent">
      <h1>I'm the parent</h1>
      <Child />
    </div>
  );
};

상위 컴포넌트인 Parent 컴포넌트의 자식 컴포넌트로 Child 컴포넌트를 지정한다.

 

<Child attribute={value} />

위와 같이 Child 컴포넌트에 속성으로 attribute를 지정하고 값으로 value로 지정한다.

 

function Child(props) {		// props === { attribute : value }
  return (
    <div className="child">
      <p>{props.attribute}</p>
    </div>
  );
};

Child 컴포넌트의 전달인자로 props 객체가 전달된다.

 

<Child>I'm the eldest child</Child>

위와 같이 태그 사이에 값을 전달하면 props의 children 이라는 키를 가진 프로퍼티의 값으로 들어간다.

 

<p>{props.children}</p>		<!-- I'm the eldest child -->

 

States

컴포넌트 내부에서 변할 수 있는 값이다.

React에서 state를 다루는 방법 중 하나로 useState 함수를 제공한다. 

import { useState } from "react";

 

useState 함수를 불러와서 컴포넌트 내부에서 호출한다. useState 를 호출한다는 것은 state라는 변수를 선언하는 것과 같다. state 변수는 React에 의해 함수가 끝나도 사라지지 않는다.

const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값);

 

state 갱신하기

function CheckboxExample() {
  const [isChecked, setIsChecked] = useState(false);

  const handleChecked = (event) => {
    setIsChecked(event.target.checked);
  };

  return (
    <div className="App">
      <input type="checkbox" checked={isChecked} onChange={handleChecked} />
      <span>{isChecked ? "Checked!!" : "Unchecked"}</span>
    </div>
  );
}

useState 함수로 isChecked 변수와 setIsChecked 함수를 선언했다.

state를 갱신하려면 setIsChecked 함수를 호출한다.

 

⓵ 사용자가 input 박스의 check박스 값을 변경하면 onchange 이벤트 핸들러가 동작하고 handleChecked 함수를 호출한다. 

⓶ handleChecked 함수는 setIsChecked 함수를 호출하고 호출된 결과에 따라 isChecked 변수가 갱신되고

⓷ React는 새로운 isChecked 변수를 CheckboxExample 컴포넌트에 넘겨 해당 컴포넌트를 다시 렌더링한다.

 

* React state는 상태 변경 함수로만 변경해야한다. 강제로 변경을 시도하면 오류가 발생할 수 있다.

 

 

React 데이터 흐름

컴포넌트의 경우 각각의 기능을 먼저 만들고 나중에 조립하는 상향식(bottom-up)방법으로 만든다.

 

반면, 데이터는 상위 컴포넌트로부터 아래로 내려오는 하향식(top-down)으로 흐른다.

 

데이터는 위에서 아래로 흐른다. 이러한 단방향 데이터 흐름(one-way data flow)은 React를 대표하는 특징 중 하나이다.

 

모든 데이터를 state로 둘 필요는 없다. state가 많아질수록 코드가 복잡해지기 때문에 state는 최소화 하는것이 좋다.

두개 이상의 컴포넌트에서 사용할 상태가 있다면 그 컴포넌트들의 공통 상위 컴포넌트에 상태를 부여한다.

 

이처럼 React 데이터를 다룰 때에는 컴포넌트들 간의 상호 관계와 데이터의 역할, 데이터의 흐름을 고려하여 위치를 설정해야 한다.