해당 게시물은 '벨로퍼트와 함께하는 모던 리액트'를 학습한 것입니다.

props

• 컴포넌트 내부에서 전달할 값을 작성한다.
  <Hello name="react" />
• 전달되는 props는 파라미터를 통해 조회될 수 있고, 객체 형태로 전달된다.
  function Hello(props) { return <div>안녕하세요 {props.name}</div> }

---

조건부 렌더링

function App() {
  return (
    <Wrapper>
      <Hello name="react" color="red" isSpecial={true}/>
      <Hello color="pink" />
    </Wrapper>
  )
}

true는 자바스크립트의 값이기때문에 중괄호에 적는다!
isSpecial={true}이 부분을 isSpecial만 적어도 동일한 의미이다!

import React from 'react';

function Hello({ color, name, isSpecial }) {
  return (
    <div style={{ color }}>
      { isSpecial ? <b>*</b> : null }
      안녕하세요 {name}
    </div>
  );
}

Hello.defaultProps = {
  name: '이름없음'
}

export default Hello;

{ isSpecial ? <b>*</b> : null }는 단축평가논리로 더욱 편히 작성될 수 있다.
isSpecial && <b>*</b>으로!!

구조분해할당

const info = { name: "rian", color: "red", bool: true }
const { name, color, bool } = info
console.log(name, color, bool) // rian red true
1. 함수의 인자 안에서 분해

const Greet = ({ name, heroName }) => {
  return (
    <div>
      <h1>
        Hello {name} a.k.a {heroName} 
      </h1>
    </div>
  )
}

2. 함수 본문 안에서 분해

const Greet = props => {
  const { name, heroName } = props;
  return (
    <div>
      <h1>
        Hello {name} a.k.a {heroName}
      </h1>
    </div>
  )
}

---

useState

함수형 컴포넌트 상태 관리를 가능케하는 리액트의 Hooks

import React, { useState } from 'react';

function Counter() {
    const [num, setNum] = useState(0) // [0, f]
    
    const increaseNum = () => {
        setNum(num + 1) // setNum(prenum => prenum + 1)
    }

    const decreaseNum = () => {
        if(num > 0) setNum(num - 1)   
    }

  return (
    <div>
      <h1>{num}</h1>
      <button onClick={increaseNum}>+1</button>
      <button onClick={decreaseNum}>-1</button>
    </div>
  );
}

export default Counter;

useState()는 초기값을 인수로 받는다.
그리고 console.log(useState(0))을 해보면 [0, f]의 배열임을 알 수 있다.
모르는 건 되도록 console찍자!!

그래서 const [num, setNum] = useState(0)은 구조분해할당이 되는 셈이다.

Setter 함수 사용법(어느방식도 무방)

• 업데이트 하고 싶은 새로운 값을 파라미터로 넣기
• 기존 값을 어떻게 업데이트 할 지에 대한 함수를 등록하는 방식으로도 값을 업데이트