Section 2. React State & Props

keepgoing·2023년 1월 25일

코드스테이츠

목록 보기

5/31

2020.01.26

State

컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값

Props vs State

props는 외부로부터 전달 받은 값
state는 내부에서 변화하는 값

Props : 이름, 성별 (불변)
State : 나이, 취업 여부(변하는 값)

✅ Props의 특징

컴포넌트의 속성(property) 의미
외부로부터 전달 받은 값
상위 컴포넌트로부터 전달 받은 값
객체 형태
읽기 전용

🔑 props 사용하는 방법

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

function Parent() {
  return (
    <div className="parent">
      <h1>I'm the parent</h1>
      <Child text={"I'm the eldest child"} text2={"I'm the eldest child2"} />
      {/* Child 컴포넌트에 또 다른 문자열을 props 로 전달해 보세요 */}
      <Child />
    </div>
  );
}

function Child(props) {
  // console 을 열어 props 의 형태를 직접 확인하세요.
  console.log("props : ", props);
  return (
    <div className="child">
      <p>{props.text}</p>
      <p>{props.text2}</p>
    </div>
  );
}

const App = () => {
  const itemOne = "React를";
  const itemTwo = "배우고 있습니다.";

  return (
    <div className="App">
      {/* Learn 컴포넌트에 itemOne 과 itemTwo 를
      props 로 전달하세요 */}
      <Learn>{`${itemOne} ${itemTwo}`}</Learn>
      <Learn />
    </div>
  );
};

const Learn = (props) => {
  // 전달받은 props 를 아래 <div> tag 사이에 사용하여
  // "React를 배우고 있습니다" 라는 문장이 렌더링되도록 컴포넌트를 완성하세요
  return (
    <div className="Learn">
      <p>{props.children}</p>
    </div>
  );
};

✅ use State

React Hooks?

Hooks 는 리액트 v16.8 에 새로 도입된 기능이다. 함수형태의 컴포넌트에서 사용되는 몇가지 기술을 Hook이라고 부른다.
함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능 등을 제공한다.

react의 진입 장벽이던 class 문법
축소가 어렵고 최신 기술의 적용이 효과적이지 않다.
이러한 이유들로 React Hooks 등장

🖥️ useState

React에서는 state 를 다루는 방법 중 하나

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

import React, { useState } from 'react';

function Example() {
     const [count, setCount] = useState(0);
    return (
      <div>
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>
         Click me
        </button>
      </div>
    );
  }

✅ React 이벤트 처리

이벤트는 camelCase 사용
JSX를 사용하여 문자열이 아닌 함수로 이벤트 처리 함수를 전달

<button onClick={handleEvent}>Event</button>

🤔 onChange

onChange 이벤트가 발생하면 e.target.value 를 통해 이벤트 객체에 담겨있는 input 값을 읽어올 수 있습니다.

function NameForm() {
  const [name, setName] = useState("");

  const handleChange = (e) => {
    setName(e.target.value);
  }
  return (
    <div>
      <input type="text" value={name} onChange={handleChange}></input>
      <h1>{name}</h1>
    </div>
  )
};

🤔 onClick

onClick 이벤트는 말 그대로 사용자가 클릭이라는 행동을 하였을 때 발생하는 이벤트입니다.

onClick 이벤트에 alert 함수를 바로 호출하면 컴포넌트 렌덩링 시
함수 자체가 아닌 함수 호출의 결과가 onClick에 적용됨.
-> alert의 실행 결과인 undefined 가 onClick에 적용되어 아무 결과도 가져 오지 않는다.
onClick 이벤트에 함수 전달 시 함수 호출이 아니라 리턴문 안에서 함수를 정의하거나, 리턴문 외부에서 함수를 정의 후 이벤트에 함수 자체를 전달해야한다.

//틀린 코드
function NameForm() {
  const [name, setName] = useState("");

  const handleChange = (e) => {
    setName(e.target.value);
  }

  return (
    <div>
      <input type="text" value={name} onChange={handleChange}></input>
      <button onClick={alert(name)}>Button</button>
      <h1>{name}</h1>
    </div>
  );
};

//올바른 코드 
<button onClick={() => alert(name)}>Button</button>

// 올바른 코드 2
const handleClick = () => {
  alert(name);
};
return (
  <div>
    <button onClick={handleClick}>Button</button>
  </div>

✅ React 데이터 흐름

상향식으로 앱을 만든다.

테스트가 쉽고 확장성이 좋다.

데이터를 전달하는 주체는 부모 컴포넌트

데이터의 흐름은 하향식!!

리액트는 단방향 데이터 흐름

state

상태는 최소화는 것이 좋다.
상태가 많아 질수록 애플리케이션은 복잡해진다.
- 부모로부터 props를 통해 전달 된다. state❌
- 시간이 지나도 변하지 않는다. state❌
- 컴포넌트 안의 다른 state나 props를 가지고 계산 가능하다.
  => state❌