TIL state 공부

클래스형 컴포넌트와 함수 컴포넌트의 특징 및 Hooks의 필요성에 대해 이해한다.
props의 개념에 대해 한 문장으로 설명할 수 있다.
state의 개념에 대해 한 문장으로 설명할 수 있다.
useState 훅을 사용하여 React 컴포넌트의 상태를 관리할 수 있다.
state를 이용해서 UI의 변경을 표현할 수 있다.
이벤트를 통해 state를 변경할 수 있다.
props의 개념을 이용해 부모 요소의 state를 자식 요소에서 반영시킬 수 있다.
props의 개념을 이용해 자식에서 일어난 이벤트로 부모의 state값을 바꿀 수 있다. (State 끌어올리기)

Props 먼저 본다.가즈아

props?

• properties : 속성
• 컴포넌트 속성 값
• 부모 컴포넌트로 전달 받은 데이터를 지닌 객체
• props를 통해 자식 컴포넌트에 모든 자바스크립트 값을 전달할 수 있따

props는 컴포넌트에 부여하는 속성

부모 -> 자식으로 상속되는 속성이고 키값을 이용하여 접근가능.
props.키값을 이용해서 필요할 때 재사용이 가능.

import React from "react";
import Child from "./Child";

function Parent() {
    return (
    <div>
        <h1>부모 컴포넌트</h1>
        <Child  />
        
    );
    
}

export default Parent; 

import로 Child를 받아오고 Child컴포넌트가 출력된다.

import React from "react";
import Child from "./Child";

function Parent() {
    return (
    <div>
        <h1>부모 컴포넌트</h1>
        <Child name='태호' />
        <Child name='상욱' />
        <Child name='종우' />
    </div>
    );
    
}

export default Parent; 

import React from "react";


function Child(props) {
    
    return (
    <>
        <h1>자식 컴포넌트  {props.name}</h1>
    </>
    );
}

export default Child;

요렇게 하면,

부모 컴포넌트에서 name = ''이 자식에게 넘겨준다.
자식 컴포넌트(Child)에서 넘겨 받은 name을 키값으로 접근해서 붙여주면, 중복된 작업없이. 각 child옆에 붙는다.
(props 객체라 키값으로 접근)
(자바스크립트 함수는 {}로 사용)

State

props와 다르게 데이터가 변경될 수 있다.
state는 화면에 보여줄 컴포넌트의 ui상태

state는 함수 안에 최상단에 위치한다.
state를 설정할 때는 화면에 보이듯이 useState 함수를 import 한 후 사용

import React, { useState } from 'react';

function State() {
  const [color, setColor] = useState('red');

  return (
    <div>
      <h1>Function Component | State</h1>
    </div>
  );
}

export default State;

const [color, setColor] = useState('red');
첫번째 인자는 상태값이 저장되는 변수
두번째 인자는 상태값으르 변경하는 함수
state는 변수를 color로, color를 갱신하는 함수를 setColor로 초기값을 red로 담았다.