Section 2 Unit 6 React State - Props

2023-05-22(월)

 

React State && Props

 

State 

= 살면서 변할 수 있는 값

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

= 내부에서 변화하는 값

 

Props

= 변하지 않는 외부로부터 전달받은 값

= 컴포넌트의 속성을 의미합니다.

= 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값

= 객체 형태이고 읽기 전용(함부로 변경될 수 없는)이다 

 

How to use props

Props 사용하는 방법

1. 하위 컴포넌트에 전달하고자 하는 값과 속성을 정의한다.

2. props를 이용하여 정의된 값과 속성을 전달한다.

3. 전달받은 props를 렌더링한다.

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

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

 

전달하고자 하는 속성 및 값을 할당

• 방법1. 속성을 선언하고, 전달하고자 하는 값을 중괄호{}를 이용하여 감싸준다.

  <Child attribute={value} />
  `

• 방법2. text라는 속성을 선언하고, 이 속성에 "I'm the eldest child"라는 문자열 값을 할당하여 컴포넌트에 전달한다.

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

Parent 컴포넌트에서 전달한 값을 Child 컴포넌트에서 받는다.

• 함수에 인자를 전달하듯, React 컴포넌트에 props인자를 전달하면 이props가 모든 데이터를 가지고 온다.

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

props를 렌더링한다.

• props를 렌더링하려면 JSX 안에 직접 불러서 사용하면 됩니다.
• 다만, props는 객체형태이고, 이 객체의 { key : value }는 Parent컴포넌트에서 정의한 { attribute : value }의 형태를 띠고 있다.

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

 

 

 

How To Use State

• React에서는 state 를 다루는 방법 중 하나로 useState 라는 특별한 함수를 제공

useState 문법

const [state저장변수, state갱신함수] = useState(상태 초기 값);

useState 동작원리

const react = () => {
  let state저장변수 = 상태 초기 값; 
      
  const state갱신함수 = (value) => {
    state저장변수 = value;
  };
      
  const useState = () => {
    return [state저장변수, state갱신함수];
  };
};

useState 사용법

React로부터 useState 를 불러온다.

 import { useState } from "react";

useState문법을 이용해서 작성

function CheckboxExample() {
  const [isChecked, setIsChecked] = useState(false);
// const [state 저장 변수, state 갱신 함수] = useState(state 초깃값);
// isChecked : state를 저장하는 변수
// setIsChecked : state isChecked 를 변경하는 함수
// useState : state hook
// false : state 초깃값  

state 변수에 저장된 값을 사용하려면 JSX 엘리먼트 안에 직접 불러서 사용

• 여기서는 isChecked 가 boolean 값을 가지기 때문에 true or false 여부에 따라 다른 결과가 보이도록 삼항연산자를 사용

  <span>{isChecked ? "Checked!!" : "Unchecked"}</span>

state를 갱신하려면 state 변수를 갱신할 수 있는 함수인 setIsChecked 를 호출

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

 

 

이번과제에 대해서

- 기존에 과제들과 이어서 state와 props 기능들을 활용해서 추가트윗을 추가하며 작성하는 과제였는데

다른 부분들은 기존에 공부했던것을 토대로 작성해야 하는 것들이라 수월하게 진행했지만

이번에 user와 msg를 state로 만들어 작성하는 과정까지도 괜찮았습니다.

 

하지만 모든 tweets들을 보여주면서 작성한 tweet을 가장 위에 두고, 또 모든 tweet들을 출력하는 부분에서

이해가 가지 않는 부분들이 있어 추가로 공부하고 질문해야 할 것 같습니다.