TIL 25. React state & component

Mission: React state & component 이해 및 실습

1) 목적

• React의 기본 개념과 사용법을 학습하고, 숫자 증가 버튼을 구현하는 연습문제를 해결하여 React에 대한 이해를 높이기 위함.

2) 방법

1. React를 설치하고 Create React App (CRA)을 사용하여 새로운 프로젝트를 생성한다.
2. useState 훅을 활용하여 컴포넌트 내에서 숫자 상태를 관리한다.
3. JSX 문법을 사용하여 숫자와 버튼을 화면에 렌더링한다.
4. 버튼 클릭 이벤트를 처리하는 함수를 작성하고, 숫자 상태를 업데이트한다.

3) 문제

• 버튼을 클릭할 때마다 숫자가 1씩 증가하도록 구현해야 한다.
  

4) 해결

1. useState 훅을 활용하여 컴포넌트 내부에서 숫자 상태를 초기화하고 업데이트한다.
2. 버튼의 onClick 이벤트 핸들러를 등록하여 클릭 시 숫자를 증가시키는 함수를 실행한다.
3. 함수 내에서 숫자 상태를 업데이트하고, React가 자동으로 화면을 재렌더링하도록 한다.

5) 알게된 점

1. React를 사용하면 UI를 컴포넌트 단위로 구조화하고 관리할 수 있다.
2. useState 훅을 활용하면 함수 컴포넌트에서도 상태를 관리할 수 있다.
3. JSX 문법을 사용하면 동적인 UI를 작성하는 것이 용이하다.
4. 버튼 클릭 시 상태를 업데이트하는 방법과 React의 자동 렌더링 메커니즘을 이해할 수 있었다.