S2U6 [React] React State & Props 1

Props

변하지 않는 외부로부터 전달받은 값

 예) 이름 성별

 

State 

살면서 변할 수 있는 값

컴퍼넌트 내부에서 변화는 값

예) 나이, 현재 사는곳, 취업여부, 결혼/연해 여부

 

props의 특징

• 컴포넌트의 속성(property)을 의미합니다. 이전 State & Props Intro에서 잘 설명되었듯, props는 성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값으로, 웹 애플리케이션에서 해당 컴포넌트가 가진 속성에 해당합니다.
• 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값입니다. React 컴포넌트는 JavaScript 함수와 클래스로, props를 함수의 전달인자(arguments)처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다. 따라서, 컴포넌트가 최초 렌더링 될 때 화면에 출력하고자 하는 데이터를 담은 초깃값으로 사용할 수 있습니다.
• 객체 형태입니다. props로 어떤 타입의 값도 넣어 전달할 수 있도록 props는 객체의 형태를 가집니다.
• props는 읽기 전용입니다. props는 성별이나 이름처럼 외부로부터 전달받아 변하지 않는 값입니다. 그래서 props는 함부로 변경될 수 없는 읽기 전용(read-only) 객체입니다. 함부로 변경되지 않아야 하기 때문입니다.
• 읽기 전용 객체가 아니라면 props를 전달받은 하위 컴포넌트 내에서 props를 직접 수정 시 props를 전달한 상위 컴포넌트의 값에 영향을 미칠 수 있게 됩니다. 즉, 개발자가 의도하지 않은 side effect가 생기게 되고 이는 React의 단방향, 하향식 데이터 흐름 원칙(React is all about one-way data flow down the component hierarchy)에 위배됩니다.
•  

A. props는 immutable한 데이터이며, 부모에서 자식으로 혹은 구성 요소 자체에서 데이터를 전달하는 데 사용됩니다. B. 클래스 컴포넌트뿐만 아니라 함수형 컴포넌트에서도 사용할 수 있습니다.

ES6 class 문법으로도 컴포넌트를 만들 수 있고, 이를 클래스 컴포넌트라고 합니다. 이와 대조해서 함수 문법을 사용하여 만든 컴포넌트를 말 그대로 함수 컴포넌트라고 부릅니다. Hook이 나오기 전에는 state는 클래스 컴포넌트에만 다룰 수 있었으나, Hook이 나오면서 함수 컴포넌트도 state를 다룰 수 있게 되었습니다.

D. props는 여러 개 지정할 수 있습니다.

How to use props

props를 사용하는 방법은 아래와 같이 3단계 순서로 나눌 수 있습니다.

1. 하위 컴포넌트에 전달하고자 하는 값(data)과 속성을 정의한다.
2. props를 이용하여 정의된 값과 속성을 전달한다.
3. 전달받은 props를 렌더링한다.

State hook, useState

function CheckboxExample() {
  const [isChecked, setIsChecked] = useState(false);
  // const [state 저장 변수, state 갱신 함수] = useState(state 초깃값);

[코드] useState 문법 예시

 

• isChecked : state를 저장하는 변수
• setIsChecked : state isChecked 를 변경하는 함수
• useState : state hook
• false : state 초깃값

이 state 변수에 저장된 값을 사용하려면 JSX 엘리먼트 안에 직접 불러서 사용하면 됩니다. 여기서는 isChecked 가 boolean 값을 가지기 때문에 true or false 여부에 따라 다른 결과가 보이도록 삼항연산자를 사용합니다.

1
<span>{isChecked ? "Checked!!" : "Unchecked"}</span>

[코드] JSX에서 삼항연산자 사용 예시

 

React도 마찬가지입니다. 사용자가 체크박스 값을 변경하면 onChange 이벤트가 이벤트 핸들러 함수인 handleChecked 를 호출하고, 이 함수가 setIsChecked 를 호출하게 됩니다. setIsChecked 가 호출되면 호출된 결과에 따라 isChecked 변수가 갱신되며, React는 새로운 isChecked 변수를 CheckboxExample 컴포넌트에 넘겨 해당 컴포넌트를 다시 렌더링 합니다.

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>
  );
}

[코드] 완성된 체크박스 컴포넌트 예시

 

State에 대한 설명

A. 컴포넌트에서 변화가 필요한 데이터를 state로 정해서 사용합니다.

B. state가 변경되면 컴포넌트가 갱신되면서 사용자가 해당 내용을 확인할 수 있습니다.

C. React 16.8 버전에 Hook이 추가되면서 클래스 컴포넌트를 작성하지 않아도 state를 사용할 수 있게 되었습니다.

D. state는 하위 컴포넌트에서도 존재할 수 있습니다.

 

 

React 데이터 흐름

 

 

React의 데이터 흐름 설명

 

A. 상태가 하나의 컴포넌트에만 영향을 준다면 그 컴포넌트에만 두면 괜찮습니다. 하지만 두 컴포넌트가 하나의 상태로부터 영향을 받는다면 두 컴포넌트 상위에 상태를 공유하는 컴포넌트가 존재해야 합니다. 단방향 데이터 흐름을 유지하고, 같은 상태를 유지할 수 있는 바람직한 방법이기 때문입니다.

B. props는 하위 컴포넌트로 내려갈 수 있지만, 상향식으로 전달할 수는 없습니다.

C & D. React는 데이터를 전달하는 주체가 부모 컴포넌트이므로 props를 이용해 하위 컴포넌트로 데이터를 전달할 수 있습니다. 그러므로 하향식입니다.

 

Pair / React Twittler State & Props

머리 아프다....