React :: 조건부 렌더링과 useState

📝 조건부 렌더링

특정 조건에 따라 다른 결과물을 렌더링하는 것

💡 삼항연산자

내용이 달라지는 모습을 보여주는 상황에서 유용

// Hello.js

import React from 'react';

function Hello({ color, name, isSpecial }) {
  return (
    <div style={{ color }}>
      { isSpecial ? <b>*</b> : null }
      // JSX에서 null, false, undefined 를 렌더링 시, 아무것도 나타나지 않음
      안녕하세요 {name}
    </div>
  );
}

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

export default Hello;

// App.js

import React from 'react';
import Hello from './Hello';
import Wrapper from './Wrapper';


function App() {
  return (
    <Wrapper>
      <Hello name="react" color="red" isSpecial={true}/>  // *안녕하세요 react
      // true는 자바스크립트 값이기 때문에 중괄호로 감쌈
      <Hello color="pink" />                             // 안녕하세요 이름없음
    </Wrapper>
  )
}

export default App;

💡 && 연산자

단순히 특정 조건이 true 이면 보여주고, 그렇지 않다면 숨겨주는 등의 상황에서 유용

// Hello.js 

function Hello({ color, name, isSpecial }) {
  return (
    <div style={{ color }}>
      {isSpecial && <b>*</b>}
      // isSpecial이 false 일 시 false, isSpecial이 true 일 시 <b>*</b> 리턴
      안녕하세요 {name}
    </div>
  );
}

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

💡 props 값 설정 생략 시, true

<Hello name="react" color="red" isSpecial />
// isSpecial : isSpecial={true} 와 동일한 의미

📝 useState

리액트의 Hooks 중 하나이며, 컴포넌트에서 상태를 관리

💡 이벤트 설정

on이벤트이름 = {실행하고싶은함수}

⚠ 함수타입의 값을 넣어주어야 함 (함수 실행 X)

💡 동적인 값 넣기, useState

• 컴포넌트에서의 상태(state) : 동적인 값
• useState 사용 시, 상태의 기본값을 파라미터로 넣어서 호출 => 배열 반환

// Counter.js

import React, { useState } from 'react';
// 리액트 패키지 내의 useState 함수를 불러옴

function Counter() {
  const [number, setNumber] = useState(0);
  // 배열 비구조화 할당을 사용하여, 각 원소를 추출

  const onIncrease = () => {
    setNumber(number + 1);   // Setter 함수는 파라미터로 전달 받은 값을 최신 상태로 설정
  }

  const onDecrease = () => {
    setNumber(number - 1);
  }

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;

💡 함수형 업데이트 방식

Setter 함수 사용 시, 새로운 값을 파라미터 대신 함수를 등록하는 방식으로 값 업데이트

// 파라미터 방식
const onIncrease = () => {
    setNumber(number + 1);   
}
  
// 함수형 업데이트 방식
// 값을 업데이트 하는 함수를 파라미터로 넣음
const onIncrease = () => {
    setNumber(prevNumber => prevNumber + 1);
}