[Props & State] Props & State

Props

Props의 정의

- 컴포넌트의 속성값

  > 부모 컴포넌트로부터 전달받은 데이터를 지니고 있는 객체

- 전달하고자 하는 어떤 값이든 자식 컴포넌트에 전달가능

  > 문자, 숫자, 변수, 함수 등

---

State

 

state를 생성하기 위해서는 useState라는 react의 내장 hook을 사용해야함

import React, { useState } from "react";

const Main = ) => {
const [color, setColor] = useState("red");
	return (
    <>
    	<h1 style={{backgroundColor: "red"}}>여기는 메인페이지입니다.</h1>
        <button onClick={() => setColor("blue")}>배경색 변경</button>
    </>
  );
};

export default Main;

 

요약
- state란 해당 컴포넌트가 UI에 보여줄 정보를 결정할 때 사용할 수 있는 상태값입니다.
- useState의 첫 번째 요소인 state를 통해 동적으로 관리하고자 하는 값을 할당할 수 있습니다.
- useState의 두 번째 요소인 setState 함수를 통해 state를 업데이트할 수 있습니다.

---

Props & State의 개념정리와 활용

Props

- 컴포넌트의 속성값

 -> 부모 컴포넌트로부터 전달받은 데이터를 지니고 있는 객체

- 전달하고자 하는 어떤 값이든 자식 컴포넌트에 전달가능

State

- 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값

  -> 해당 컴포넌트가 UI에 보여줄 정보를 결정할 때 사용할 수 있는 상태값

- 컴포넌트 내에서 정의하고 사용하며 얼마든지 변경할 수 있다.

Parents.js

import React, { useState } from 'react';
import Child from './Child';

const Parent = () => {
  const [color, setColor] = useState('red');

  const changeColor = () => {
    setColor('blue');
  };

  return (
    <>
      <div>부모 컴포넌트입니다.</div>
      <Child color={color} change={changeColor} />
    </>
  );
};

export default Parent;

 

Child.js

import React from "react";

const Child = (props) => {
  console.log(props); // {color: 'red', change: () => {setColor('blue')}}

  return (
    <>
      <div>자식 컴포넌트입니다.</div>
      <p>{props.color}</p>
      <button onClick={props.change}>색상 바꾸기</button>
    </>
  );
};

export default Child;

 

Q. 자식 컴포넌트에서 생성한 state를 같이 활용해야 하는 상황이 생긴다고 한다면
어떻게 자식 컴포넌트에서 부모 컴포넌트로 state를 넘겨줘야할까요?

A. 데이터의 단방향성 때문에 자식-> 부모 컴포넌트로 넘겨주는 방법은 없음
데이터는 위에서 아래로 즉, 한방향으로만 흘러감
부모와 자식이 같은 데이터를 활용해야 한다면,
부모 컴포넌트에서 자식 컴포넌트로 전달하는 방식으로 구현