[SEB FE] Section 2

Unit6 - [React] React State & Props

• React State & Props

---

React State & Props

---

학습목표

• state, props의 개념에 대해서 이해하고, 실제 프로젝트에 바르게 적용할 수 있다.
• React 함수 컴포넌트(React Function Component)에서 state hook을 이용하여 state를 정의 및 변경할 수 있다.
• React 컴포넌트(React Component)에 props를 전달할 수 있다.
• 이벤트 핸들러 함수를 만들고 React에서 이용할 수 있다.
• 실제 웹 애플리케이션의 컴포넌트를 보고 어떤 데이터가 state이고 props에 적합한지 판단할 수 있다.
• 실제 웹 애플리케이션 개발 시 적합한 state와 props의 위치를 스스로 정할 수 있다.
• React의 단방향 데이터 흐름(One-way-data flow)에 대해 자신의 언어로 설명할 수 있다.

---

개념학습

---

Props

---

Props는 무엇인가?

• props 속성의 이름을 임의로 지정해 줄 수 있다.

• props는 여러 개 지정할 수 있다.

• 클래스 컴포넌트와 함수형 컴포넌트에서도 사용할 수 있다.

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

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

  • props는 성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값으로, 웹 애플리케이션에서 해당 컴포넌트가 가진 속성에 해당한다.
  • 속성값은 변하지 않는 불변 변수로 부모 컴포넌트가 주는 속성값을 'props' 형태로 전달 받는다. 또는 구성 요소 자체에서 데이터를 전달하는 데 사용한다.
  • 반대로 state는 컴포넌트 내부에서 변할 수 있는 값이다.

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

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

• 객체 형태이다.

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

• props는 읽기 전용이다.

  • props는 성별이나 이름처럼 외부로부터 전달받아 변하지 않는 값이다. 그래서 props는 함부로 변경될 수 없는 읽기 전용(read-only) 객체이다. 왜냐하면 함부로 변경되지 않아야 하기 때문이다.

    읽기 전용 객체가 아니라면 props를 전달받은 하위 컴포넌트 내에서 props를 직접 수정 시 props를 전달한 상위 컴포넌트의 값에 영향을 미칠 수 있게 된다. 즉, 개발자가 의도하지 않은 side effect가 생기게 되고 이는 리액트의 단방향, 하향식 데이터 흐름 원칙(React is all about one-way data flow down the component hierarchy)에 위배된다.

---

How to use props

---

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

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

---

• 위 단계에 맞추어 props를 사용하기 위해 우선 <Parent>와 <Child>라는 컴포넌트를 선언하고, <Parent>컴포넌트 안에 <Child>컴포넌트를 작성한다.

[코드] <Parent>, <Child> 컴포넌트 선언

function Parent() {
	return (
    <div className='parent'>
        <h1>나는 부모다.</h1>
        <Child />
    </div>
    );
};

function Child() {
  return (
   <div className='child'></div>
  );
};

---

• 컴포넌트를 만들었으니 이제 전달하고자 하는 속성을 정의하면 된다. HTML에서 속성과 값을 할당하는 방법과 같다. 아래의 코드에서는 <a>요소의 href속성에 'www.naver.com'이라는 값을 주었다.

[코드] HTML 속성과 값 다루는 법

<a href='www.naver.com'>Click me to visit Naver</a>

---

• 리액트에서 속성 및 값을 할당하는 방법도 이와 유사하다. 다만, 전달하고자 하는 값을 중괄호 {}를 이용하여 감싸주면 된다.

[코드] React에서 JSX 속성 및 값을 할당하는 방법 1

<Child attribute={value} />

---

• 위 방법을 이용하여 text라는 속성을 선언하고, 이 속성에 'I am the eldest child'라는 문자열 값을 할당하여 <Child>컴포넌트에 전달한다.

[코드] React에서 JSX 속성 및 값을 할당하는 방법 2

<Child text={'I am the eldest child'}>

---

• <Parent>컴포넌트에서 전달한 'I am the eldest child'라는 문자열을 <Child>컴포넌트에서 받으면 된다. 방법은 함수에 인자를 전달하듯이 리액트 컴포넌트에 props를 전달하면 되고, 이 props가 필요한 모든 데이터를 가지고 오게 된다.

[코드] <Child> 컴포넌트에서 props 매개변수 사용 예시

function Child(props) {
	return (
    	<div className='child'></div>
    );
};

---

• props를 전달받았으니, 마지막으로 이 props를 렌더링하면 된다. props를 렌더링하려면 JSX안에 직접 불러서 사용하면 된다. 다만, props는 객체라고 하였고, 이 객체의 { key : value }는 <Parent> 컴포넌트에서 정의한 { attribute : value }의 형태를 띠게 된다. 따라서 자바스크립트에서 객체의 value에 접근할 때 dot notation을 사용하는 것과 동일하게 props의 value 또한 dot notation으로 접근할 수 있다. 아래와 같이 props.text를 JSX에 중괄호와 함께 작성하면 잘 작동한다.

[코드] <Child> 컴포넌트에서 props.text 렌더링 예시

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

---

props.children

• props를 전달하는 또 다른 방법으로 여는 태그와 닫는 태그의 사이에 value를 넣어 전달하는 방법이 있다. 이 경우 props.children을 이용하면 해당 value에 접근하여 사용할 수 있다.

[코드] props.children 예시

function Parent() {
  return (
  	<div className='parent'>
      <h1>나는 부모다.<h1>
      <Child>나는 아이다.</Child>
  );
};
        
function Child(props) {
  return (
  	<div className='child'>
      <p>{props.children}</p>
    </div>
  );        
};

---

State

---

State는 무엇인가?

• 컴포넌트 내부에서 변할 수 있는 값이다.
• 리액트에서는 state를 다루는 방법 중 하나로 useState 라는 특별한 함수를 제공한다.

---

State hook, useState

---

useState 사용법

이 함수의 사용 방법과 작동 방식은 체크박스 예로 살펴본다.

---

• useState를 이용하기 위해서는 리액트로부터 useState를 불러와야 한다. import 키워드로 useState를 불러온다.

[코드] useState 불러오기

import{ useState } from 'react';

---

• 이후 useState를 컴포넌트 안에서 호출한다. useState를 호출한다는 것은 'state' 라는 변수를 선언하는 것과 같으며, 이 변수의 이름은 아무 이름으로 지어도 된다. 일반적인 변수는 함수가 끝날 때 사라지지만, state 변수는 리액트에 의해 함수가 끝나도 사라지지 않는다.

---

• 문법적으로 보면 아래 예시의 isChecked, setIsChecked는 useState의 리턴값을 구조 분해 할당한 변수이다.

[코드] useState 문법 예시

function CheckboxExample() {
 // 새로운 state 변수를 선언하고, 여기서는 이것을 isChecked라고 한다.
  const [isChecked, setIsChecked] = useState(false);
}

[코드] useState 구조 분해 할당 예시

function CheckboxExample() {
  // 1번 코드를 풀어쓰면
  const [isChecked, setIsChecked] = useState(false); // 1번

  //...

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

---

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

[코드] useState 수도코드

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

---

• 수도 코드를 실제 코드로 작성하면 이렇게 된다.

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

[코드] useState 문법 예시

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

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

---

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

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

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

---

state 갱신하기

• state를 갱신하려면 state 변수를 갱신할 수 있는 함수인 setIsChecked를 호출한다.

• 이번 예시의 경우, input[type=checkbox] JSX 엘리먼트의 값 변경에 따라서 isChecked가 변경되어야 합니다. 브라우저에서 checked로 값이 변경되었다면, React의 isChecked도 변경되어야한다.

• input[type=checkbox] 엘리먼트의 값이 변경되면 onChange 이벤트가 발생하고, 이벤트 핸들러 함수가 작동되는 패턴은 DOM을 다뤄보시면서 저번 과제에서 다뤄봤다. 유효성 검사 스프린트에서 input[type=text] 엘리먼트의 값이 변경될 때, 이벤트 핸들러 함수를 작동시키는 패턴을 복습할 수 있다.

• 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 hook 사용 시 주의점

• 리액트 컴포넌트는 state가 변경되면 새롭게 호출되고, 리렌더링 된다.
• 리액트 state는 상태 변경 함수 호출로 변경해야 한다. 강제로 변경을 시도하면 안된다. 상태 변경 함수 사용은 리액트와 개발자의 약속이다. 때문에 강제로 변경을 시도하면, 리렌더링이 되지 않는다거나, state가 제대로 변경되지 않는다.