[React] 리액트 Props & State

yayaya_hojin·2023년 9월 1일

Props react props react state

리엑트

목록 보기

2/6

🚀 React에서 Component의 데이터 관리 및 전달을 하기 위해 Props와 State를 사용한다.

1. Props

Props는 Properties(속성)의 줄임말이다.

Parent(상위 or 부모) 컴포넌트에서 Child(하위 or 자식) 컴토넌트로 전달되는 데이터를 의미한다.

이때 전달은 단방향으로써 부모(상위) 컴포넌트에서 자식(하위) 컴포넌트로 값을 전달한다.

전달되는 데이터는 자식 컴포넌트에서 읽기 전용이며 수정 불가능하다.

값을 수정하기 위해서는 전달받은 해당 Props를 관리하는 곳에서 값을 변경하면 하위 컴포넌트에 영향을 줄 수 있다.

ParentComponent.js

import React from "react";

const ParentComponent = () => {
  return <ChildComponent work="Coding" />;
};

const ChildComponent = (props) => {
  return <div>{props.work}중입니다...</div>;
};

export default ParentComponent;

ParentComponent 함수에서 ChildComponent를 호출하고 props로 work="Coding"을 전달

ChildComponent 함수에서 전달받은 props는 객체 형태로 work를 사용하기 위해 props.work로 조회한다.

만약 ParentComponent 함수에서 ChildComponent에 props를 전달하지 않으면 defaultProps를 설정할 수 있다.

ParentDefualtComponent.js

import React from "react";

const ParentDefualtComponent = () => {
  return <ChildComponent />;
};

const ChildComponent = (props) => {
  return <div>{props.work}중입니다...</div>;
};

ChildComponent.defaultProps = {
  work: "Break"
};

export default ParentDefualtComponent;

ParentDefualtComponent 함수에서 ChildComponent를 호출하고 props를 전달하지 않으면

ChildComponent</span> 함수에서 defaultProps로 work의 초기 값을 Break로 설정해 해당 props.work를 전달 받지 못하면 defalutProps를 적용시킨다.

2. State

State는 상태를 의미하며 컴포넌트 내에서 관리되는 데이터이다.

State는 React Hooks useState를 이용해 읽기 및 쓰기 모두 가능하게 상태를 관리한다.

Counter.js

import React, { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(0); //count의 상태 값 선언 및 0 초기화

  const handleIncrease = () => { //count state 값을 +1 하는 함수
    setCount(count + 1);
  };

  const handleDecrease = () => { //count state 값을 -1 하는 함수
    setCount(count - 1);
  };

  return (
    <div>
      <div>{count}</div> {/*현재 count 값(읽기 전용)*/}
      <button onClick={handleIncrease}>+1</button> {/*버튼 클릭 시 handleIncrese 함수 호출*/}
      <button onClick={handleDecrease}>-1</button> {/*버튼 클릭 시 handleDecrese 함수 호출*/}
    </div>
  );
};

export default Counter;