[S2]Chapter6.[React] React State & Props

박현석·2022년 10월 5일

목록 보기

17/40

State

살면서 변할 수 있는 값

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

State hook, useState

사용법
import { useState } from "react";
useState 불러오기
useState 를 이용하기 위해서는 React로부터 useState 를 불러와야한다. import 키워드로 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 구조 분해 할당 예시
이후 useState 를 컴포넌트 안에서 호출해준다. useState를 호출한다는 것은 "state"라는 변수를 선언하는 것과 가으며, 이 변수의 이름은 아무 이름으로 지어도 된다. 일반적인 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 의해 함수가 끝나도 사라지지 않는다.
예시의 isChecked, setIsChecked 는 useState 의 리턴값을 구조 분해 할당한 변수이다.
const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값);
useState 수도 코드
useState를 호출하면 배열을 반환하는데, 배열의 0번째 요소는 현재 state 변수이고, 1번째 요소는 이 변수를 갱신할 수 있는 함수이다. useState의 인자로 넘겨주는 값은 state의 초깃값이다.
<span>{isChecked ? "Checked!!" : "Unchecked"}</span>
JSX에서 삼항연산자 사용 예시

갱신하기
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를 갱신하려면 state 변수를 갱신 할 수 있는 함수인 setIsChecked 를 호출한다.

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

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

주의점

React 컴포넌트는 state가 변경되면 새롭게 호출되고, 리렌더링 된다.

React state는 상태 변경 함수 호출로 변경해야 한다. 강제로 변경을 시도하면 안된다. 상태 변경 함수 사용은 React와 개발자의 약속이기 때문에 지켜줘야한다. 강제로 변경을 시도하면, 리렌더링이 되지 않는다거나, state가 제대로 변경되지 않는다.
ex) state.push(1);, state[1] = 2;, state = "wrong state";

Props

props는 외부로부터 전달받은 값

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

컴포넌트가 최초 렌더링 될 때 화면에 출력하고자 하는 데이터를 담은 초깃값으로 사용할 수 있다.

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

props는 읽기 전용이다.
props는 성별이나 이름처럼 외부로부터 전달받아 변하지 않는 값, 그래서 props는 함부로 변경될 수 없는 읽기 전용(read-only) 객체이다. 함부로 변경되지 않아야 하기 때문이다.
읽기 전용 객체가 아니라면 props를 전달받은 하위 컴포넌트 내에서 props를 직접 수정 시 props를 전달한 상위 컴포넌트의 값에 영향을 미칠 수 있게 된다.

props를 사용하는 방법 3단계 순서

하위 컴포넌트에 전달하고자 하는 값(data)과 속성을 정의한다.

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

전달받은 props를 렌더링한다.
function Parent() {
  return (
    <div className="parent">
      <h1>I'm the parent</h1>
      <Child />
    </div>
  );
};
function Child() {
  return (
    <div className="child"></div>
  );
}
<Parent>, <Child> 컴포넌트 선언
<a href="www.codestates.com">Click me to visit Code States</a>
HTML 속성과 값 다루는 법
<Child attribute={value} />
React에서 JSX 속성 및 값을 할당하는 방법 1
React에서 속성 및 값을 할당하는 방법도 이와 유사하다. 다만, 전달하고자 하는 값을 중괄호 {}를 이용하여 감싸주면 된다.
<Child text={"I'm the eldest child"} />
React에서 JSX 속성 및 값을 할당하는 방법 2
function Child(props) {
  return (
    <div className="child"></div>
  );
};
<Child> 컴포넌트에서 props 매개변수 사용 예시
함수에 인자를 전달하듯이 React 컴포넌트에 props를 전달하면 되고, 이 props가 필요한 모든 데이터를 가지고 오게 된다.
function Child(props) {
  return (
    <div className="child">
      <p>{props.text}</p>
    </div>
  );
};
<Child> 컴포넌트에서 props.text렌더링 예시
props를 전달받았으니, props를 렌더링 해본다. props를 렌더링하려면 JSX 안에 직접 불러서 사용하면 된다. 다만 props는 객체이고, 객체의 {key:value}는 <Parent>컴포넌트에서 정의한 {attribute:value}의 형태를 띠게 된다. 따라서 JavaScript에서 객체의 value에 접근할 때 dot notation을 사용하는 것과 동일하게 props의 value 또한 dot notation으로 접근할 수 있다.

props.children

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>
  );
};
props.children 예시

이벤트 처리

React 에서 이벤트는 소문자 대신 카멜 케이스(camelCase)를 사용한다.

JSX를 사용하여 문자열이 아닌 함수로 이벤트 처리 함수를 전달한다.
<button onclick="handleEvent()">Event</button>
HTML에서 이벤트 처리 방식이 위와 같다면
<button onClick={handleEvent}>Event</button>
React의 이벤트 처리 방식은 위와 같다.

제일 많이 쓰이는 이벤트 종류로는 onChange,onClick등이 있다.

React 데이터 흐름

React의 개발 방식의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작한다.

Tree구조로 나타내면 위 그림과 같다.

컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 마치 인자 혹은 속성 처럼 전달 받을 수 있다.

즉 데이터를 전달하는 주체는 부모 컴포넌트가 된다. 이는 데이터 흐름이 하향식임을 의미한다.

원칙은 매우 중요하다. 단방향 데이터 흐름이라는 키워드가 React를 대표하는 설명중 하나이다.

컴포넌트는 props를 통해 전달받은 데이터가 어디서 왔는지 전혀 알지 못한다.

두 개의 자식 컴포넌트가 하나의 상태에 접근하고자 할 때는 두 자식의 공통 부모 컴포넌트에 상태를 위치해야한다.

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