TIL 221019 리액트 쫌쫌따리

• props 복습
• useState 복습
• 그 외 잡다한 리액트 강의 많이 뒤적여봄..
• 유료 강의 props/useState 다시 공부

카운트 구현

import React from "react";
import Container from "./Container";
import Counter from "./Counter";

import MyHeaders from "./myHeaders";

function App() {
  // 자식 요소에게 넘길 프롭스들을 요소에 직접 적으면 엄청 귀찮아지잖음
  // 그러니까 아예 상수 객체로 지정해서 저따 넣으라는 말임
  const counterProps = { a: 1, initialValue: 5 };

  return (
    <Container>
      <div>
        <MyHeaders />
        <Counter {...counterProps} />
        {/* 스프레드 연산자 쓰는 이유 : 객체를 펼쳐서 전달하는 것이기 때문에 사용한다. */}
        {/* 이니셜밸류를 줘서 초기값을 설정할 수 있음 */}
        {/* props <- 프로퍼티의 줄임말 */}
      </div>
    </Container>
  );
}

export default App;

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

const Counter = ({ initialValue }) => {
  // 비구조화 할당으로 객체에서 이니셜밸류라는 키로 밸류를 가져온 것

  // 부모요소에서 설정한 초기값을
  // 매개변수로 가져와서 사용할 수 있다. (이게 프롭스라는 단어의 개념임)

  // 기본값 0에서 시작
  // 1씩 증가
  // 1씩 감소하는
  // count 상태
  const [count, setCount] = useState(initialValue);
  // 유즈스테이트는 배열을 반환하고,
  // 배열의 비구조화할당을 통해서
  // count, setCount라는 상수를 가져온 것
  // 이때 count는 상태의 값으로 저장된 것
  // setCount는 count를 변화시키는 상태변화 함수로 사용

  // setCount로 count의 숫자가 업데이트 될 때 마다 Counter라는 함수가
  // 반환을 다시한다고 보면 된다. 즉 업데이트 될 때마다 Counter를 re-rendering한다.

  // 컴포넌트는 자신이 가진 state(상태)가 변화하면 화면을 다시 렌더링한다.

  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>
  );
};
// 실수로 프롭스 값 하나를 빼먹거나 그럴 것 같을 때는 디폴트 프롭스 값을 설정할 수도 있다.
Counter.defaultProps = {
  initialValue: 5,
};

export default Counter;

// 요점 : 리액트에서는 컴포넌트가 가진 state가 바뀌면 그 컴포넌트가 리렌더 된다.
// 여러개의 스테이트를 하나의 컴포넌트가 가지고 있어도 전혀 문제가 없다.

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

export default OddEvenResult;

li map

function AppJSX() {
  const name = "Chea";
  const list = ["와", "이거", "진짜", "신기하당", "재밌당"];
  return (
    <div className="App">
      <>
        <h1 className="">hello! {name}</h1>
        <ul>
          {list.map((item) => (
            <li>{item}</li>
          ))}
        </ul>
      </>
    </div>
  );
}

map 함수 활용하고 괜히 너무 설렜던 날ㅎㅎ; 아직 아리까리하지만 얼른 제대로 익혀보고 싶다

오늘은 커밋을 못했다... 매일 1커밋 목표하려고 했는데 올릴만한게 없넹...