[React] useState와 useEffect 제대로 이해하기

Day 1 목표

• useState 이해하기
• 렌더링 개념 이해하기
• 조건부 렌더링 구현하기
• Git 브랜치 -> PR -> Merge까지 해보기

---

오늘 구현한 기능

📌 증가 / 감소 버튼 구현

• 버튼 클릭시 count 증가
• 버튼 클릭시 count 감소

📌 조건부 렌더링 추가

• count가 0이상이면 😊표시
• 음수이면 ⚠️ 음수입니다 출력
• 5 이상이면 "5이상입니다" 출력

📸 캡쳐

---

구현코드📝

import { useEffect, useState } from "react";

function App () {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    console.log("렌더링 발생!");
  }, [count]);
  
  return(
    <div>
      <h1>증가, 감소 버튼</h1>
      <button onClick={() => setCount(count + 1)}>
        증가버튼
      </button>
      <button onClick={() => setCount(count - 1)}>
        감소버튼
      </button>
      {count >= 0 ? <p>😊</p> : <p>⚠️ 음수입니다</p>}
      {count >= 5 && <p>5 이상입니다</p>}
      <p>현재 값 : {count}</p>
    </div>
  );
}

export default App;

---

핵심 개념 정리

👉 useState란
React에서 값을 저장하는 훅(Hook).
값이 바뀌면 컴포넌트가 다시 실행된다.

---

👉 렌더링이란
컴포넌트 함수가 다시 실행되는 것.

새로고침이 아니라,
React가 화면을 다시 계산해서 업데이트하는 과정.

---

👉 setState가 호출되면 일어나는 일

1. state 값 변경
2. 컴포넌트 재실행
3. return 부분 다시 계산
4. 화면 업데이트

---

👉 useEffect란
렌더링이 끝난 뒤 실행되는 코드.

dependency 배열에 따라 실행 시점이 달라진다.

• [] -> 처음 한 번
• [count] -> count 변경 시
• 생략 -> 렌더링 마다

---

Git 정리🗃️

오늘 처음으로 :

• feature 브랜치 생성
• PR 생성
• Merge
• Branch 삭제

👉 협업 기본 흐름을 경험했다.

이건 그냥 코드보다 더 중요한 경험임!

---

📎 Project Link

🐙 GitHub Repository
👉 https://github.com/wjdtor2-design/Frontend-portfolio
📝 Velog Study Log