React State & Props

uk·2022년 11월 16일

목록 보기

4/17

Props란?

컴포넌트의 속성(Property)을 의미한다.
props는 외부로부터 전달받은 변하지 않는 값으로 웹 애플리케이션에서 해당 컴포넌트가 가진 속성에 해당한다.

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

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

읽기 전용이다.
props는 외부로부터 전달받아 변하지 않는 값이므로 변경될 수 없는 읽기 전용 객체이다.

읽기 전용(read-only) 객체?

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

props 사용하기

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

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

1. 컴포넌트 선언

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

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

<Parent>와 <Child> 컴포넌트를 선언하고 <Parent> 컴포넌트 안에 <Child> 컴포넌트를 작성한다.

2. JSX 속성 및 값 할당

<Child attribute={value} />

HTML에서 속성과 값을 할당하는 방법과 유사하다.

<Child text={"I'm the eldest child"} />

text 속성 선언 후 "I'm the eldest child" 문자열 값을 할당하여 <Child> 컴포넌트로 전달한다.

3. 하위 컴포넌트에서 props 전달 받기

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

함수에 인자를 전달하듯이 React 컴포넌트에 props를 전달하고 props는 필요한 모든 데이터를 가지고 오게 된다.

4. props 렌더링

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

props를 렌더링하려면 JSX 안에서 사용한다. props는 객체이고 <Parent> 컴포넌트에서 정의한 { attribute : value }의 형태를 띠게 된다.
JavaScript에서 객체의 value에 접근할 때 dot notation을 사용하는 것과 동일하게 props의 value 또한 dot notation으로 접근한다.

State란?

state는 컴포넌트 내부에서 변할 수 있는 값으로 상태는 React state로 다뤄야 한다.

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

useState 사용하기

1. React로부터 useState 불러오기

import { useState } from "react";

import 키워드로 useState를 불러온다.

2. useState를 컴포넌트 안에서 호출하기

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

useState를 호출한다는 것은 "state"라는 변수를 선언하는 것과 같으며 이 변수의 이름은 아무 이름으로 지어도 무방하다.
일반적인 변수는 함수가 끝날 때 사라지지만 state 변수는 React에 의해 함수가 끝나도 사라지지 않는다.

2-1. 구조 분해 할당?

function Test() {
 // const [state 저장 변수, state 갱신 함수] = useState(상태 초기값);
	const [isChecked, setIsChecked] = useState(false);
}

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

isChecked와 setIsChecked는 useState의 리턴값을 구조 분해 할당한 변수이다.
useState를 호출하면 배열을 반환하는데 배열의 0번째 요소는 현재 state 변수이고 1번째 요소는 이 변수를 갱신할 수 있는 함수이다.
useState의 인자로 넘겨주는 값(false)은 state(isChecked)의 초기값이다.

3. state 변수에 저장된 값 사용

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

JSX 엘리먼트 안에 직접 불러서 사용한다. isChecked가 boolean값을 가지기 때문에 true or false 여부에 따라 다른 결과가 보이도록 삼항연산자를 사용한다.

4. state 갱신하기

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

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

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

state를 갱신하려면 state 변수를 갱신할 수 있는 함수인 setIsChecked를 호출한다.
input[type=checkbox] JSX 엘리먼트의 값 변경에 따라서 isChecked가 변경되어야 하므로 브라우저에서 checked로 값이 변경되었다면 React의 isChecked도 변경되어야 한다.
input[type=checkbox] 엘리먼트의 값이 변경되면 onChange 이벤트가 발생하고 이벤트 핸들러 함수가 작동된다.
체크박스 값이 변경되면 onChange 이벤트가 이벤트 핸들러 함수인 handleChecked를 호출하고 이 함수가 setIsChecked 를 호출하게 된다.
setIsChecked가 호출되면 호출된 결과에 따라 isChecked 변수가 갱신되며 React는 새로운 isChecked 변수를 Test 컴포넌트에 넘겨 해당 컴포넌트를 다시 렌더링 한다.

state hook 사용 시 주의점

React 컴포넌트는 상태가 변경될 때마다 새롭게 호출되고 리렌더링 된다.
React state는 상태 변경 함수 호출로 변경해야 하며 강제로 변경을 시도하면 안 된다. 강제로 변경을 시도하면 리렌더링이 되지 않거나 state가 제대로 변경되지 않는다.

주니어 프론트엔드 개발자 uk입니다.

이전 포스트

React SPA와 React Router

다음 포스트