S2_U6_CH. React State & Props

Judevv·2023년 5월 23일
PropsReactState
0

코드스테이츠 SEB FE BOOTCAMP

목록 보기
49/55

Chapter 1. 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)에 대해 자신의 언어로 설명할 수 있다.

1-1. Props

  • props의 특징
    • 컴포넌트의 속성(property)를 의미
    • 성별이나 이름처럼 변하지 않는, 외부로부터 전달받은 값
    • 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값
    • React 컴포넌트에 함수의 전달인자처럼 전달하여, 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트 반환 → 컴포넌트가 최초 렌더링 될 때 화면에 출력하고자 하는 데이터를 담은 초깃값으로 사용할 수 있음
    • 객체 형태
    • 읽기 전용 : 함부로 변경될 수 없는 객체

💡) 읽기 전용 객체
React에서 props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터다. props는 읽기 전용 객체이므로 자식 컴포넌트에서 수정할 수 없다. 그러나 부모 컴포넌트가 자식 컴포넌트에 새로운 props를 제공하거나 기존 props를 업데이트하는 것과 같은 다른 방법으로 props를 업데이트할 수 있다.
props가 읽기 전용 객체인 이유는 자식 컴포넌트가 부모 컴포넌트의 상태를 제어하지 못하도록 하기 위해서다. 부모 컴포넌트는 자식 컴포넌트가 표시해야 하는 데이터를 제어해야 하며 자식 컴포넌트는 부모 컴포넌트가 원하는 방식으로 데이터를 표시해야 한다.
props가 읽기 전용 객체가 아니면 자식 컴포넌트가 부모 컴포넌트의 상태를 제어하고 부모 컴포넌트가 예상한 방식으로 렌더링되지 않을 수 있다.

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

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

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

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

컴포넌트를 만들었으면 전달하고자 하는 속성을 정의.

React에서 속성 및 값을 할당하는 방법은 전달하고자 하는 값을 중괄호 {}를 이용하여 감싸줌

<Child attribute={value} />

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

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

<Parent> 컴포넌트에서 전달한 "I'm the eldest child"라는 문자열을 <Child> 컴포넌트에서 받는 방법은 함수에 인자를 전달하듯이 React 컴포넌트에 props를 전달하면 되고, 이 props가 필요한 모든 데이터를 가지고 옴

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

props를 렌더링하려면 JSX 안에 직접 불러서 사용하면 됨 다만, props는 객체라고 하였고, 이 객체의 { key : value }는 <Parent> 컴포넌트에서 정의한 { attribute : value }의 형태

따라서 JavaScript에서 객체의 value에 접근할 때 dot notation을 사용하는 것과 동일하게 props의 value 또한 dot notation으로 접근할 수 있음 

function Child(props) {
  return (
    <div className="child">
      <p>{props.text}</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>
  );
};

1-2. State

  • 컴포넌트 내에서 변할 수 있는 값, 상태

  • useState 사용법

    • React에서는 state를 다루는 방법 중 하나로 useState라는 특별한 함수를 제공
    • useState를 이용하기 위해서는 React로부터 useState를 불러와야 함
    • import 키워드로 불러올 수 있음
import { useState } from "react";
  • 이후 useState를 컴포넌트 안에서 호출
    • useState를 호출한다는 것은 "state"라는 변수를 선언하는 것과 같으며, 이 변수의 이름은 아무 이름으로 지어도 됨
    • 일반적인 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 의해 함수가 끝나도 사라지지 않음
  • useState를 호출하면 배열을 반환하는데, 배열의 0번째 요소는 현재 state 변수이고, 1번째 요소는 이 변수를 갱신할 수 있는 함수
  • useState의 인자로 넘겨주는 값은 state의 초깃값
  const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값);
  • 주의점
    • React 컴포넌트는 state가 변경되면 새롭게 호출되고, 리렌더링 됨
    • React state는 상태 변경 함수 호출로 변경해야 함
    • 강제로 변경을 시도하면, 리렌더링이 되지 않는다거나, state가 제대로 변경되지 않음

1-3. 이벤트 처리

  • 사용자의 상호작용에 대한 응답으로 발생하는 동작을 다룸

  • 컴포넌트에서 특정 동작이나 상태 변경을 하고, 애플리케이션의 동적인 동작을 구현하는데 사용

  • 이벤트 핸들러 함수 정의: 이벤트가 발생했을 때 실행될 함수를 정의

    • 이벤트 핸들러 함수는 컴포넌트 내부에 작성

  • 이벤트 핸들러 함수 연결: 이벤트 핸들러 함수를 해당 이벤트와 연결하여 이벤트가 발생했을 때 실행될 수 있도록 함

    • 이벤트 핸들러 함수는 JSX 요소의 속성으로 사용
// 버튼을 클릭할 때 특정 동작이 발생하도록 하는 예제
import React from 'react';

class MyComponent extends React.Component {
  handleClick() {
    console.log('Button clicked!');
  }

  render() {
    return (
      <button onClick={this.handleClick}>Click me</button>
    );
  }
}

// handleClick은 이벤트 핸들러 함수
// onClick 속성을 통해 해당 이벤트와 handleClick 함수를 연결하여, 버튼이 클릭되었을 때 handleClick 함수가 실행
// 이벤트 핸들러 함수는 클릭이벤트가 발생했을 때 'Button clicked!'을 콘솔에 출력
  • 이벤트 핸들러 함수 이름을 직접 호출하지 않고 참조만 전달해야함
  • 리액트는 다양한 이벤트를 지원하며, 예를 들어 onClick, onChange, onSubmit 등 다양한 이벤트를 다룰 수 있음

1-4. Controlled Component

  • React가 state를 통제할 수 있는 컴포넌트
  • React에서는 이렇게 상태에 해당하는 데이터를 state로 따로 관리

1-5. React 데이터 흐름

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

  • React는 상향식으로 앱을 만듦

    • 테스트가 쉽고, 확장성이 좋음
    • 앱의 디자인을 전달받으면 가장 먼저 컴포넌트 계층 구조로 나누는 것이 가장 먼저 해야 할 일

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

  • 데이터를 전달하는 주체는 부모 컴포넌트 → 데이터 흐름이 하향식이라는 것을 의미

    • 단방향 데이터 흐름(one-way data flow)이라는 키워드가 React를 대표하는 설명 중 하나일 정도로 중요함

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

  • 어떤 데이터를 상태로 두어야 하는지는 다음 세 가지 질문을 통해 판단해 볼 수 있음

    • 부모로부터 props를 통해 전달됩니까? 그러면 확실히 state가 아닙니다.
    • 시간이 지나도 변하지 않나요? 그러면 확실히 state가 아닙니다.
    • 컴포넌트 안의 다른 state나 props를 가지고 계산 가능한가요? 그렇다면 state가 아닙니다.

  • 두 개의 자식 컴포넌트가 하나의 상태에 접근하고자 할 때는 두 자식의 공통 부모 컴포넌트에 상태를 위치시킴

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

profile
Judevv
감성있는 개발자를 꿈꿔요
이전 포스트

S2_U5_과제. React Twittler SPA(작성 예정

다음 포스트

S2_U6_과제. (작성예정)

0개의 댓글