[React] React State & Props

[Props와 State]

Props

: 외부로부터 전달받은 값

State

: 내부에서 변화하는 값
: 살면서 변할 수 있는 값
: 컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값

[State와 Props 구별해 보기!]

이름: Props
성별: Props
나이: State
현재 사는 곳: State
취업 여부: State
결혼/연애 여부: State

Props

🔹 Props의 특징

• 컴포넌트의 속성(property)을 의미

성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값으로 애플리케이션에서 해당 컴포넌트가 가진 속성에 해당

• 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값

React 컴포넌트는 JS 함수와 클래스로, Props를 함수의 전달인자처럼 전달받아서 이를 기반으로
화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다.
즉, 컴포넌트가 최초 렌더링 될 때 화면에 출력하고자하는 데이터를 담은 초기값으로 사용할 수 있다.

• 객체 형태

Props로 어떤 타입의 값도 넣어 전달할 수 있게 Props는 객체의 형태를 가진다.

• Props는 읽기 전용

성별이나 이름과 같이 외부로부터 전달받아서 변하지 않는 값이다. 
그래서 Props는 함부로 변경이 될 수 없는 읽기 전용 객체이다.

읽기 전용 객체가 아니라면 Props를 전달받은 하위 컴포넌트 내에서 Props를 직접 수정하게 될 때,
Props를 전달한 상위 컴포넌트의 값에 영향을 미칠 수 있게 된다.
즉, 개발자가 의도하지 않아 side effect가 생기고 이는 React의 단반향, 하향식 데이터 흐름 원칙에 위배된다.

🔹 Props 사용법

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

function Parent() {
  // Parent 컴포넌트 작성
  return (
    <div className="parent">
      <h1>I'm the parent</h1>
      {/* HTML 속성과 값 다루는 법,  <a> 요소의 href 속성에 네이버 링크 값을 줌 */}
      <a href="https://www.naver.com/">Click me to visit Naver</a>
      {/* React에서 JSX 속성 및 값을 할당하는 방법 : <Child attribute={value} /> */}
      <Child text={"I'm the eldest child"} />
      <Child />
    </div>
  );
}

// Child 컴포넌트 작성
function Child(props) {
  return (
    <div className="child">
      <p>{props.tect}</p>
    </div>
  );
}

// props를 전달하는 또 다른 방법: 여는 태그와 닫는 태그 사이에 value를 넣어서 전달하는 방법
// 이와 같은 방법을 사용할 경우에 props.children을 이용하여 value에 접근해 사용할 수 있다 


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

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

---

Action item

• App 컴포넌트에 있는 itemOne과 itemTwo를 Learn 컴포넌트에 props로 전달하여, "React를 배우고 있습니다"라는 문자열이 rendering 되도록 코드를 완성하기
  
  

---

State

• state는 컴포넌트 내부에서 변할 수 있는 값이다. 실제 애플리케이션에서는 무엇을 상태라고 할 수 있을까?

ex) 쇼핑몰 장바구니
소비자가 구매할 물건과 당장 구매하지 않을 물건을 체크박스에 체크하여 구분 짓는다.
이를 장바구니 내에서 상태로 구분한다면 "check된 상태"와 "check 되지 않은 상태"이다.
체크된 상태와 체크되지 않은 상태와 같이 컴포넌트 내에서 변할 수 있는 값(상태)는 React state로 다뤄야 한다.

🔹 useState 사용법

1. useState 불러오기

• React에서는 state를 다루는 방법 중 하나로 useState 함수를 제공, 이를 이용하기 위해서 React로부터 useState를 불러와야 한다. import 키워드를 통해 useState 불러온다.

import { useState } from "react";

1. useState 호출하기

• useState를 컴포넌트 안에서 호출한다는 것은 "state" 변수를 선언하는 것과 같으며, 변수명은 짓고 싶은 변수명으로 지어도 된다. 일반적인 변수면 함수가 끝날 때 사라지지만, state 변수는 React에 의해서 함수가 끝나도 사라지지 않는다.

function CheckboxExample() {
  // 새로운 state 변수를 선언하고, isChecked 라 부르겠습니다.
  // 1번 코드를 풀어쓰면
  const [isChecked, setIsChecked] = useState(false); // 1번
  
  // isChecked: state를 저장하는 변수
  // setIsChecked: state isChecked를 변경하는 함수
  // useState : state hook
  // false: state 초깃값
  
  //...

  // 2번 코드와 같다.
  const stateHookArray = useState(false); // 2번
  const isChecked = stateHookArray[0];
  const setIsChecked = stateHookArray[1];

• useState를 호출하게 되면 배열을 반환하게 되는데 이 배열의 0번째 요소는 현재 state 변수이고, 1번째 요소는 이 변소를 갱신할 수 있는 함수이다. useState의 인자로 넘겨주는 값은 state의 초기값이다.

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

위의 코드는 아래와 같다

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

• state 변수에 저장된 값을 사용하려면 JSX 엘리먼트 안에 직접 불러와서 사용

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

1. state 갱신하기

• state를 갱신하려면 state를 갱신할 수 있는 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>
  );
}

💥주의: React 컴포넌트는 tate가 변경되면 새롭게 호출되며, 리렌더링한다.

+ React state는 상태 변경 함수 호출로 변경해야 한다.

const [isChecked, setIsChecked] = useState(false);
// isChecked에 재할당XX setIsChecked 함수를 호출하여 값을 변경시켜야 한다.

 

 

참고: 코드스테이츠