데브코스 TIL - Day 51

24년 2월 1일 강의를 들은 내용과 추가로 학습한 내용을 기록한 글입니다.

useState()

• 리액트에서 상태를 관리할 때 사용하는 hook

📘문법

import { useState } from "react";
function App() {
  const [state, setState] = useState(initialState);
  return <div></div>;
}

• state: 현재 상태 값
• setState: 상태를 변경하는 함수

📘setState 변경함수 동작원리

1. 기존 state와 신규 state를 비교 검사를 하고
2. 변경된 것이 없으면 재렌더링을 하지 않음
3. 변경된 것이 있으면 렌더링을 함

📘예제

count 값 변경

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

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

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

컴포넌트

📘특징

모듈화

• 작은 조각으로 나누어 개발
• 독립적이고, 재사용 가능함

재사용성

• 컴포넌트를 여러 부분에서 사용하거나 외부 프로젝트에서 가져와서 사용할 수 있음
• 중복된 코드를 줄이고, 유지보수가 좋아짐

📘단점

• 컴포넌트가 많아지면 state를 전달(공유)하는게 불편해짐

삼항연산자

조건 ? 참일 때 : 거짓일 때

📘예제

const eg1 = 10 > 5 ? "참" : "거짓";
const eg2 = 10 < 5 ? "참" : "거짓";

console.log("eg1:", eg1); // eg1: 참
console.log("eg2:", eg2); // eg2: 거짓

실습

• 게시물 여러개
• 상세보기

App.tsx

Post.tsx

결과