🗓 진행일: 2022.05.04

5-4. State (상태)

계속해서 변화하는 특정 상태

상태에 따라 각각 다른 동작을 함

Counter.js

import React,{useState} from 'react';
// 상태를 사용하기 위해 useState를 가져옴

const Counter = () => {
    // 0에서 출발
    // 1씩 증가하고
    // 1씩 감소하는
    // count 상태

    const [count,setCount] = useState(0);
    // 배열을 반환하고 배열의 비구조화 할당을 통해서 0번째 인덱스 count
    // setCount: count를 변화시키는 상태 변화 함수
    // useState 괄호 안은 맨 처음 초기화 값

    const onIncrease = () => {
        setCount(count + 1);
    }

    const onDecrease = () => {
        setCount(count - 1);
    }

    return (
        <div>
            <h2>{count}</h2>
            <button onClick={onIncrease}>+</button>
            <button onClick={onDecrease}>-</button>
        </div>
    );
};

export default Counter;

Counter가 계속 다시 생성되는? 그런 거라고 하셨다

5-5. Props

컴포넌트에 데이터를 전달하는 방법

Counter.js

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

const Counter = ({initialValue}) => {

    // props로 받아올 때는 찍어보고
    // console.log(props);

    const [count,setCount] = useState(initialValue);

    const onIncrease = () => {
        setCount(count + 1);
    }

    const onDecrease = () => {
        setCount(count - 1);
    }

    return (
        <div>
            <h2>{count}</h2>
            <button onClick={onIncrease}>+</button>
            <button onClick={onDecrease}>-</button>
            <OddEvenResult count={count}/>
        </div>
    );
};

// 만약 값을 보낼 때 까먹고 안 보내게 되면? default로~
Counter.defaultProps = {
    initialValue: 0,
};

export default Counter;

OddEvenResult.js

const OddEvenResult = ({count}) => {
    console.log(count);
    return <>{count % 2 === 0 ? "짝수" : "홀수"}</>;

};

export default OddEvenResult;

1. 리액트의 컴포넌트는 본인이 관리하고, 본인이 가진 state가 바뀔 때마다 리렌더가 되고
2. 나에게 내려온 props가 바뀔 때마다 리렌더가 되고,
3. 내 부모가 리렌더가 되면 나도 리렌더가 된다

얘네들을 하나로 묶고 싶다면?

Container.js

const Container = ({children}) => {
    return <div style={{margin: 20, padding: 20, border: "1px solid gray"}}>
        {children}
    </div>;
};

export default Container;

App.js

import React from 'react';
import Container from './Container';
import Counter from './Counter';
// import './App.css';

import MyHeader from './MyHeader';

function App() {
  const number = 5;

  const counterProps  = {
    a: 1, 
    b: 2, 
    c: 3,
    d: 4,
    e: 5,
    // initialValue: 5, // 만약 initialValue를 까먹고 안 보내게 되면?
  };

  return (
    <Container>
        <div > 
          <MyHeader/>
          {/* <Counter a={1} b={2} c={3} d={4} e={5} initialValue={5}/> */}
          <Counter {...counterProps}/>
      </div>
    </Container>
  );
}

export default App;

안에 넣어서 안에 있는 코드가 prop이 되고 전달 됨