반응형
1. 프로젝트 생성 및 라이브러리 설치
- 프로젝트 생성 : yarn create react-app todo-app
- 라이브러리 설치 : yarn add node-sass@4.14.1 classnames react-icons
2. Prettier 설정
3. index.css 수정
4. UI 구성하기 : 총 4개의 컴포넌트를 만든다
- TodoTemplate : 화면을 가운데 정렬, 앱 타이틀을 보여준다, children으로 내부 JSX를 props로 받아와 렌더링 해줌
- TodoInsert :새로운 항목을 입력하고 추가할 수 있는 컴포넌트, state를 통해 인풋의 상태를 관리
- TodoListItem :각 할 일 항목에 대한 정보를 보여주는 컴포넌트, todo 객체를 props로 받아와 상태에 따라 다른 UI를 보여줌
- TodoList : todos 배열을 props로 받아 온 후 map을 사용해 여러 개의 TodoListItem 컴포넌트로 변환하여 보여줌
5. TodoTemplate 만들기
반응형
'개발 > React' 카테고리의 다른 글
[React] 리액트 Hooks란? 왜 사용하고 종류는? (0) | 2025.06.09 |
---|---|
[React] 리액트 이벤트 핸들링 실습 (0) | 2025.06.09 |
[React] 리액트 컴포넌트, State (1) | 2025.06.09 |
[React] 리액트 JSX 문법 기본 실습 (0) | 2025.06.09 |
[React]리액트 설치 및 환경 설정(Windows) (1) | 2025.06.09 |