5/21 TIL

학습 목표

• React 컴포넌트의 기본적인 구성 방법 이해
• React의 상태 관리와 props 전달 방법 학습

컴포넌트 구성

React에서 컴포넌트를 구성하는 방법을 학습했다. 컴포넌트는 크게 함수형 컴포넌트와 클래스형 컴포넌트로 나눌 수 있으며, 최근에는 함수형 컴포넌트의 사용이 권장되고 있다. 함수형 컴포넌트는 간결하고, Hook을 통해 상태 관리 및 라이프사이클 기능을 사용할 수 있다는 장점이 있다.

상태 관리와 props

React의 상태 관리 기능과 props 전달 방식에 대해 배웠다. useState Hook을 사용하여 컴포넌트 내부에서 상태를 관리할 수 있으며, 이 상태는 컴포넌트 내부에서 자유롭게 변경할 수 있다. 또한, 컴포넌트 간에 데이터를 전달할 때는 props를 사용한다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하고, 자식 컴포넌트는 이를 받아서 활용할 수 있다.

실습: 학생 목록 앱 구현

오늘의 실습에서는 학생 목록을 관리하는 간단한 앱을 구현했다. 이 앱에서는 학생들의 정보(이름, 나이, 학점)를 관리하고, 특정 조건에 따라 이를 필터링할 수 있는 기능을 구현했다.

• FilterButtons: 사용자로부터 입력 받은 조건에 따라 학생 목록을 필터링하는 기능을 가진 컴포넌트를 구현했다. 나이와 학점에 따라 필터링할 수 있는 버튼을 제공한다.
• StudentList: 필터링된 학생 목록을 보여주는 컴포넌트를 구현했다. 각 학생의 이름, 나이, 학점 정보를 리스트 형태로 표시한다.