React State & Props

Jelkov Ahn·2021년 9월 17일
0

React

목록 보기
4/10
post-thumbnail

Achievement Goals

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

props (properties의 약자)

  • 기본적인 정의: 컴포넌트의 속성, 외부로부터 전달받은 값

  • react에서 props의 의미: 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값, 함수클래스의 전달인자로 받아온다.

  • props의 형태 : 객체 형태로 불러옵니다.

  • props의 특징 : 변경이 불가능한 (Read-only)객체 형태입니다. props를 받은 하위 컴포넌트에서 수정시에, React의 단방향, 하향식 데이터 흐름 원칙(React is all about one-way data flow down the component hierarchy) 탑 다운 방식에 위배됩니다.

  • props 사용 방법

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

상위 함수 컴포넌트
function Parent() {
  return (
    <div className="parent">
      <h1>I'm the parent</h1>
      <Child />
    </div>
  );
};

하위 함수 컴포넌트
function Child() {
  return (
    <div className="child"></div>
  );
};
  • (1) 하위 컴포넌트에 전달하고자 하는 값(data)과 속성을 정의한다.
<html> html은 아래와 같습니다.
<a href="www.codestates.com">Click me to visit Code States</a>
<React> 전달하고자 하는 값을 중괄호 {}
<Child attribute={value} />

-> <Child text={"I'm the eldest child"} />
  • (2) props를 이용하여 정의된 값과 속성을 전달한다.
function Child(props) {
  return (
    <div className="child"></div>
  );
};
  • (3) 전달받은 props를 렌더링한다.
function Child(props) {
  return (
    <div className="child">
      <p>{props.text}</p>
    </div>
  );
};
  • 결과
function Parent() {
  return (
    <div className="parent">
      <h1>I'm the parent</h1>
      <Child text={"I'm the eldest child"} />
      <Child />
    </div>
  );
}

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

export default Parent;

  • props 내용 추가하기
import "./styles.css";

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

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

export default Parent;

  • props를 하는 또 다른 방법 (props.children)
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로 소환
const App = () => {
  const itemOne = "React를";
  const itemTwo = "배우고 있습니다.";

  return (
    <div className="App">
      <Learn>{itemOne}</Learn>
      <Learn>{itemTwo}</Learn>
    </div>
  );
};

const Learn = (props) => {
  return <div className="Learn">
  <p>{props.children}</p>
  </div>;
};

export default App;

State

  • 기본적인 정의: 내부에서 변할 수 있는 값

  • react에서 state의 의미: 컴포넌트 내에서 변할 수 있는 값을 다룬다.

  • 예시

import React, { useState } from "react";

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>
  );
}

export default CheckboxExample;

State hook, useState

  • React에서 state를 다루는 함수가 useState 입니다.

  • (1) useState 불러오기.
    import { useState } from "react";

  • (2) useState 를 호출한다는 것은 "state" 라는 변수를 선언하는 것과 같으며, 이 변수의 이름은 아무 이름으로 지어도 됩니다. state 변수는 React에 의해 함수가 끝나도 사라지지 않습니다.
    const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값);

<문법>
function CheckboxExample() {
// 새로운 state 변수를 선언하고, 여기서는 이것을 isChecked 라 부르겠습니다.
  const [isChecked, setIsChecked] = useState(false);
  
isChecked : state를 저장하는 변수
setIsChecked : state isChecked 를 변경하는 함수
useState : state hook
false : state 초기값

  
<구조분해할당>
function CheckboxExample() {
  // 1번 코드를 풀어쓰면
  const [isChecked, setIsChecked] = useState(false); // 1번

  //...

  // 2번 코드와 같습니다.
  const stateHookArray = useState(false); // 2번
  const isChecked = stateHookArray[0];
  const setIsChecked = stateHookArray[1];
}
  • (3) state의 사용
    • is checked는 boolean값을 가지기 때문에, 삼항연산자를 사용한다.
      <span>{isChecked ? "Checked!!" : "Unchecked"}</span>

state 갱신하기

import React, { useState } from "react";

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>
  );
}

export default CheckboxExample;


  • React에서도 Dom과 같이 input[type=checkbox] 엘리먼트의 값이 변경되면 onChange 이벤트가 발생됩니다.
    -> 사용자가 체크박스 값을 변경
    -> onChange 이벤트가 이벤트 핸들러 함수인 handleChecked 를 호출하고
    -> 이 함수가 setIsChecked 를 호출하게 됩니다.
    -> setIsChecked 가 호출되면 호출된 결과에 따라 isChecked 변수가 갱신되며
    -> React는 새로운 isChecked 변수를 CheckboxExample 컴포넌트에 넘겨 해당 컴포넌트를 다시 렌더링 합니다.

  • 주의점
    React state는 상태 변경 함수 호출로 변경해야 합니다.
    강제로 변경을 시도하면 안 됩니다. 상태 변경 함수 사용은 React와 개발자의 약속이기 때문에 지켜주셔야 합니다. 강제로 변경을 시도하면, 리렌더링이 되지 않는다거나, state가 제대로 변경되지 않습니다.

출처 : 코드스테이츠

profile
끝까지 ... 가면 된다.

0개의 댓글