project 1 [카운터] 앱 만들기1. 프로젝트 준비하기프로젝트를 구현하기 전, 앱을 어떤 설계와 기능으로 구현할지 살펴보는 단계인 요구사항 분석 과정을 거쳐야 한다. 리액트 앱을 구현할 때는 컴포넌트 단위로 생각하는 게 필요하다. [카운터] 앱의 요구사항 분석을 하자면App 컴포넌트: Viewer 컴포넌트와 Controller 컴포넌트를 감싸는 템플릿Viewer 컴포넌트: 현재의 카운트 표시Controller 컴포넌트: 카운트를 제어재사용 가능한 수준에서 기능 별로 컴포넌트를 분리하면 프로젝트를 관리하기 쉬워진다.  2. UI 구현하기UI란 사용자 인터페이스라는 뜻으로, 웹 페이지에서 사용자와 상호작용하는 요소를 말한다. 요소의 외양(껍데기)라고 생각하면 된다.2-(1). Viewer 컴포넌트 만들..

24-25/React.js 1 2024. 11. 22. 10:00

project 1 [카운터] 앱 만들기 프로젝트 준비하기 [카운터] 앱 프로젝트 진행 숫자를 더하고 빼는 기능을 구현 요구사항 분석하기 3개의 컴포넌트의 역할 App컴포넌트 : Viewer과 Controller 컴포넌트를 감싸는 템플릿 Viewer 컴포넌트 : 현재의 카운트를 표시함 Controller 컴포넌트 : 카운트를 제어할 수 있는 기능 제공 리액트 앱 만들기 7week > project1 생성 npx create-react-app . 명령어 입력 src 폴더에서 파일 삭제 src/App.test.js src/logo.svg src/reportWebVitals.js src/setupTest.js index.js 수정하기기 import React from 'react'; import ReactDOM..

23-24/React.js 3 2023. 11. 17. 10:00

카운터 앱 만들기 요구사항 분석하기 현재의 카운트를 표시: 따라서 이 영역의 이름을 뷰어(Viewer) 라고 하겠습니다. 카운트를 늘리거나 줄일 수 있는 6개의 버튼: 카운트를 제어하는 영역이라는 의미에서 컨트롤러(Controller)라고 이름 붙이겠습니다. 컴포넌트 단위로 생각하기 리액트에서 앱을 구현할 때는 컴포넌트 단위로 생각하는 게 필요합니다. 앞에서 살 펴본 Viewer, Controller 영역을 일종의 컴포넌트라고 생각하는 겁니다. [카운 터] 앱에는 3개의 컴포넌트가 있습니다. App 컴포넌트: Viewer와 Controller 컴포넌트를 감싸는 템플릿 Viewer 컴포넌트: 현재의 카운트를 표시함 Controller 컴포넌트: 카운트를 제어할 수 있는 기능을 제공함 “하나의 컴포넌트는 단..

23-24/React.js 1 2023. 11. 17. 10:00

모든 리액트 컴포넌트에는 라이프사이클(수명 주기)이 존재합니다. 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝납니다. 컴포넌트를 처음으로 렌더링할 때 어떤 작업을 처리해야 하거나 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 하는 경우, 또는 불필요한 업데이트를 방지해야 할 때에 컴포넌트의 라이프사이클 메서드를 사용합니다. 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있습니다. 함수 컴포넌트에서는 Hooks 기능을 사용하여 비슷한 작업을 처리할 수 있습니다. 7.1 라이프사이클 메서드의 이해 라이프사이클 메서드의 종류는 총 9가지입니다. Will 접두사가 붙은 메서드 : 어떤 작업을 작동하기 전에 실행되는 메서드 Did 접두사가 붙은 메서드 :..

22-23/22-23 리액트 스타터 3 2022. 11. 17. 10:00

1. 라이프사이클 메서드의 이해 1) 라이프 사이클 메서드의 종류(9가지)> Will 접두사가 붙은 메서드 : 어떤 작업을 작동하기 전에 실행되는 메서드 Did 접두사가 붙은 메서드 : 어떤 작업을 작동한 후에 실행되는 메서드 2) 라이프 사이클의 종류 마운트 : 페이지에 컴포넌트가 나타남 업데이트 : 컴포넌트 정보를 업데이트 언마운트 : 페이지에서 컴포넌트가 사라짐 (1) 마운트 DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트(mount)라고 한다. (2) 업데이트 컴포넌트가 업데이트하는 경우들 props가 바뀔 때 state가 바뀔 때 부모 컴포넌트가 리렌더링될 때 this.forceUpdate로 강제로 렌더링을 트리거할 때 (3) 언마운트 컴포넌트를 DOM에서 제거하는 것을 언마운트(unmo..

21-22/21-22 리액트 마스터 2021. 11. 8. 15:00