React Hooks, 이벤트 핸들링, 조건부 렌더링

Hooks

Hooks는 함수형 컴포넌트에서 상태 관리와 사이드 이펙트를 다루는 함수다. React 16.8에서 도입되었고 클래스 컴포넌트 없이도 모든 React 기능을 사용할 수 있게 되었다.

• useState: 컴포넌트에 상태를 추가. const [count, setCount] = useState(0)
• useEffect: 사이드 이펙트 처리 (데이터 fetching, 구독, DOM 조작 등)
• useMemo / useCallback: 성능 최적화를 위한 메모이제이션
• useRef: DOM 접근이나 리렌더링 없이 값을 유지할 때 사용

Hook의 규칙: 최상위 레벨에서만 호출해야 하고 React 함수 컴포넌트 또는 커스텀 Hook 안에서만 호출해야 한다.

Handling Events

HTML과 비슷하지만 React의 이벤트 핸들링에는 몇 가지 차이가 있다. 이벤트 이름을 camelCase로 작성하고 (onclick → onClick), 문자열 대신 함수를 전달한다.

주의할 점은 이벤트 핸들러에서 e.preventDefault()를 명시적으로 호출해야 한다는 것. HTML처럼 return false로 기본 동작을 막을 수 없다.

Conditional Rendering

React에서 조건부 렌더링은 JavaScript 조건문을 그대로 사용한다.

• if 문: 컴포넌트 상단에서 조건 분기 후 다른 JSX를 반환
• 삼항 연산자: condition ? <A /> : <B />
• 논리 AND 연산자: condition && <Component /> (조건이 true일 때만 렌더링)

List and Keys

배열 데이터를 map()으로 순회하면서 JSX 리스트를 생성한다. 이때 각 항목에 고유한 key prop을 부여해야 한다.

React는 Key를 보고 어떤 항목이 변경/추가/삭제되었는지 식별한다. 배열의 index를 key로 사용하는 것은 순서가 바뀔 수 있는 경우 권장되지 않는다. 가능하면 데이터의 고유 ID를 key로 사용하자.

정리하며

오늘 정리한 패턴들은 React로 실제 UI를 만들 때 거의 매번 쓰인다. 특히 Hooks는 React의 핵심이니 useState와 useEffect만이라도 확실히 이해해두자.