예림

• 1주차

• 회원가입 페이지 구현하기

아이디/비밀번호/이름

• <input> 태그 사용 (type="text", type="password")

<input
  id="userId"
  type="text"
  placeholder="아이디를 입력해주세요."
  className={styles.input}
  value={userId}
  onChange={(e) => setUserId(e.target.value)}
/>

성별 선택(라디오 버튼)

• <input type="radio">를 사용해 남성 / 여성 / 비공개 중 하나만 선택 가능

• 모든 라디오 버튼은 name="gender"로 동일해야 하나만 선택됨

<fieldset className={styles.field}>
  <legend>성별</legend>
  <label><input type="radio" name="gender" value="male" />남성</label>
  <label><input type="radio" name="gender" value="female" />여성</label>
  <label><input type="radio" name="gender" value="secret" />비공개</label>
</fieldset>

출생년도 선택(드롭다운)

• <select> 태그와 <option>으로 구성

• 2004, 2005, 2006 세 가지 중 하나 선택 가능

<select
  id="birthYear"
  value={birthYear}
  onChange={(e) => setBirthYear(e.target.value as any)}
>
  <option value="">선택해주세요</option>
  <option value="2004">2004</option>
  <option value="2005">2005</option>
  <option value="2006">2006</option>
</select>

• 4주차

useState()

🔹 **useState()**는 React에서 컴포넌트 내부의 상태(state) 를 관리하기 위한 Hook임.
사용자의 행동(클릭, 입력 등)에 따라 값이 바뀌면, React가 자동으로 UI를 다시 렌더링함.

---

기본 문법

const [state, setState] = useState(initialValue);

구성요소	설명
state	현재 상태값 (변수처럼 사용)
setState	상태를 변경하는 함수
initialValue	상태의 초기값 (문자열, 숫자, 배열, 객체 등 가능)

---

작동 과정

1. count의 초기값은 0이다.
2. 사용자가 버튼을 클릭하면 setCount()가 실행되어 값이 변경됨.
3. 상태값이 바뀌면 React가 자동으로 UI를 다시 렌더링함.

---

상태 변화의 핵심 원리

• 직접 변수 값을 수정하면 화면이 갱신되지 않음!!

  count = 5; 

• 반드시 setState() 함수를 사용해야 함.

  setCount(5); // React가 자동으로 UI 업데이트

---

자주 쓰이는 예시

상황	선언 예시	초기값
텍스트 입력 관리	const [name, setName] = useState('')	빈 문자열
체크박스 상태	const [checked, setChecked] = useState(false)	false
리스트 데이터	const [items, setItems] = useState([])	빈 배열
API 데이터 로드	const [data, setData] = useState(null)	null

• 5주차

• API 연동 준비

• 백엔드와 연동하려면 같은 속성 이름으로 변경해야함

항목	상태 선언 예시	초기값
이름	const [username, setUsername] = useState('')	빈 문자열
비밀번호	const [password, setPassword] = useState('')	빈 문자열
아이디	const [loginId, setLoginId] = useState('')	빈 문자열
성별	const [gender, setGender] = useState('')	빈 문자열
생일	const [birthDate, setBirthDate] = useState('')	빈 문자열
전화번호	const [phoneNumber, setPhoneNumber] = useState('')	빈 문자열
인증 상태	const [verified, setVerified] = useState(false)	false