혜연

스터디 내용작성

---

• 4주차

useState란?

• React 컴포넌트 안에서 상태(state)를 관리할 수 있게 해주는 함수이다.

=> 즉, 변할 수 있는 값(데이터)을 화면에 반영하고 싶을 때 사용.

항상 2개의 값을 동시에 반환. ✅ const [state, setState] = useState(초기값);

• 작동 원리

import React, { useState } from "react";

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

  return (
    <div>
      <p>현재 숫자: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

1. 컴포넌트가 처음 렌더링 될 때 useState(초기값)이 실행되어 상태가 만들어짐
2. 사용자가 버튼을 클릭해 setCount()를 호출하면 상태가 바뀜
3. 상태가 바뀌면 React가 자동으로 컴포넌트를 다시 렌더링.
4. 새로운 값이 화면에 반영된다.

=> useState는 **"값 + 값 변경 기능"**을 한 세트로 제공한다

• 1주차

• 회원가입 UI 구현

1) 파일 구조와 핵심 의도

app/
 └── signup/
      ├── page.js (또는 page.tsx)
      ├── Signup.jsx          <-- 클라이언트 컴포넌트 (UI)
      └── Signup.module.css   <-- 컴포넌트 전용 CSS (CSS Module) 

• 왜 이런 구조를 갖는가?

  • app/signup은 Next.js APP Router 구조에 자연스럽게 들어가는 경로이다. page.tsx가 라우트 진입점이고, Signup.jsx를 import 해서 렌더링한다.

  • Signup.jsx에 'use client'를 붙여 클라이언트 전용 컴포넌트로 동작하도록 한다.

  • 스타일은 CSS Modules (Signup.module.css)로 분리.

2) signup.jsx (구체적 기능과 이유)

주요 클래스와 역할

• div 태그 -> 레이아웃 구성

  React에서는 HTML의 class대신 className을 사용한다. 여기서 styles.coontainer는 CSS모듈에서 가져온 클래스 이름을 의미.

  input이 무엇을 입력하는 칸인지 설명하는 텍스트 label -> 스타일링: 글자 크기, 색상, 간격 등

  • <input type="password" ... className={styles.input} />

  실제 비밀번호 입력칸

  type="password" -> 입력 시 글자가 숨겨진다.

  placeholder -> 입력 전 힌트 문구 표시 (흐린 글씨)

  ---

  • 'useClient';

  👉 브라우저에서 실행되고 useState, useFffect 같은 React 훅을 쓸 수 있게 해준다.

  • import React from "react";

  👉 React 라이브러리 불러오기. JSX 문법을 사용하기 위해 반드시 필요하다.

  • import styles from "@/app/signup/Signup.module.css";

  👉 CSS Module 파일 import