회고 리스트

1. 기본적인 jsx 문법을 정리하시오.

• 반드시 부모 요소 하나가 감싸는 형태여야 한다.
• 자바스크립트 표현식
• if문(for문) 대신 삼항 연산자(조건부 연산자) 사용
• React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용
• JSX 내에서 주석 사용 방법
  • 요소 내부에서는 {/* */} 형식을 사용
  • 요소 외부에서는 일반적인 JavaScript 주석을 사용 (// 또는 /* */)
  • 속성 안에서는 주석 불가
• class가 아닌 className을 사용
• 변수를 사용할 때, {}를 사용
• HTML안에 스타일 지정할 때는 style = {{ style }}

2. useEffect의 3가지 용도는?

1) 컴포넌트가 마운트될 때 (처음 렌더링 시)

• 컴포넌트가 화면에 처음 나타날 때 한 번만 실행
• API 호출, 초기화 작업, 이벤트 리스너 추가 등에 사용

2) 특정 값이 업데이트될 때 (의존성 배열에 따라 재실행)

• 배열에 지정된 값이 변경될 때마다 실행
• 상태(state)나 props가 변경될 때 실행되는 로직에 사용

3) 컴포넌트가 언마운트될 때 (정리 작업)

• 컴포넌트가 화면에서 사라질 때 실행
• 타이머 제거, 이벤트 리스너 해제, 메모리 정리 등에 사용

3. useState에 대하여 설명하시오.

useState는 배열을 반환한다.
첫 번째 요소는 현재 상태 값이고 두 번째 요소는 상태를 업데이트하는 함수이다.

• 초기값 설정

  • useState의 인자로 전달한 값이 상태의 초기값이 된다.
  • 초기값은 문자열, 숫자, 객체, 배열 등 어떤 데이터 타입도 가능하다.

• 비동기적 업데이트

  • setCount와 같은 상태 업데이트 함수는 비동기적으로 동작한다.
  • 여러 상태 업데이트가 연속으로 호출되면 React가 성능을 최적화하기 위해 batching(배치 처리)한다.

• 재렌더링(trigger)

  • 상태가 업데이트되면 해당 컴포넌트가 자동으로 다시 렌더링된다.

---

3줄요약
1. 리액트에서 state 란 리액트가 관리하는 화면 갱신 변수이다.
2. jsx return 문 안에서는 if 문 사용이 불가하다.
3. state 변수가 변경이 일어나면, 해당 컴포넌트를 다시 실행 시킨면서 화면갱신이 일어 난다.