사람의 인생처럼 리액트 컴포넌트도 태어나고 사라지는 생애주기가 있습니다. 이를 다른 말로 라이프 사이클이라고 합니다. 리액트 컴포넌트의 라이프 사이클은 크게 3단계로 구분합니다. 다음 그림은 리액트 컴포넌트의 3단계 라이프 사이클을 도식화한 것입니다. 리액트 컴포넌트의 라이프 사이클은 크게 마운트(Mount, 탄생), 업데이트(Update, 갱신), 언마운트(Unmount, 사망) 로 구분합니다. 마운트(Mount): 컴포넌트를 페이지에 처음 렌더링할 때 업데이트(Update): State 나 Props 의 값이 바뀌거나 부모 컴포넌트가 리렌더해 자신도 리렌더될 때 언마운트(Unmount): 더 이상 페이지에 컴포넌트를 렌더링하지 않을 때 라이프 사이클을 이용하면 컴포넌트가 처음 렌더링할 때 특정 동작을..
UI 구현을 모두 마쳤으므로 이 UI 요소들을 움직이게 하는 카운터 기능들을 차레로 구현하겠습니다. State 를 이용해 카운터 기능 구현하기 카운터의 기능을 한 문장으로 정의하면 다음과 같습니다. "Controller 컴포넌트에 있는 버튼을 클릭하면, Viewer 컴포넌트에 있는 카운트가 증가하거나 감소해야 한다." 예를 들어 Controller 컴포넌트에 있는 버튼을 클릭하면 Viewer 컴포넌트의 숫자는 0 에서 100 으로 바뀌어야 합니다. 버튼 클릭 이벤트가 발생했을 때 컴포넌트 값을 도적으로 렌더링하려면 리액트의 State 를 사용해야 합니다. 그렇다면 [카운트] 앱에서 State 를 사용해 어떻게 컴포넌트의 값을 동적으로 렌더링하는지 그 과정을 간단히 설명해 보겠습니다. 바로 실습을 진행할 ..
앞서 요구사항을 분석하고 리액트 앱을 생성해 프로젝트 구현 준비를 마쳤습니다. 이번에는 기능 구현을 앞서 UI(User Interface) 를 구현하겠습니다. UI 는 사용자 인터페이스라는 뜻으로, 웹 페이지에서 사용자와 상호작용하는 요소를 말합니다. 이 요소들의 사용성을 높이기 위해 기능을 추가하기도 하고, 특별한 형태나 색상 등의 스타일을 적용하기도 합니다. 기능 구현에 앞서 UI 를 먼저 구현한다고 함은 쉽게 말해 이들 요소의 외양(껍데기) 을 먼저 만든다고 이해하면 됩니다. Viewer 컴포넌트 만들기 현재의 카운트를 표시하는 Viewer 컴포넌트를 만들겠습니다. 그 전에 src 에 component 폴더를 만들고, 이 폴더에서 Viewer.js 를 생성합니다. const Viewer = () =..
지금까지 배운 내용을 토대로 [카운터] 앱 프로젝트를 진행하겠습니다. [카운터] 앱은 숫자를 더하고 빼는 기능만 있는 아주 단순한 앱입니다. 첫 리액트 프로젝트인만큼 간단한 기능만 포함하고 있으므로 누구나 어렵지 않게 구현할 수 있습니다. 프로젝트를 구현하기에 앞서 꼭 해야 할 일이 있습니다. 이 앱을 어떤 설계와 기능으로 구현할지 살펴보는 일입니다. 이를 소프트웨어 공학에서는 요구사항 분석이라고 합니다. 요구사항 분석은 마치 요리를 시작하기 전 레시피를 점검하는 일과 비슷합니다. 요구사항 분석 없이 프로젝트를 구현하면 중간에 코드를 다시 작성하는 일이 발생할 수 있으므로 반드시 거치는 게 좋습니다. 이번 절에서는 요구사항을 분석하면서 [카운터] 앱 프로젝트를 준비하겠습니다. 요구사항 분석하기 완성된 프..
리액트의 Ref 를 이용하면 돔(DOM) 요소들을 직접 조사할 수 있습니다. Ref 는 Reference 의 줄임말로 참조라는 뜻입니다. 이번 절에서는 이 기능을 이용해 돔 요소를 제어해 보겠습니다. useRef 사용하기 리액트에서는 useRef 라는 리액트 함수를 이용해 Ref 객체를 생성합니다. 먼저 함수 useRef 로 Ref 를 생성하기 전에 Body 컴포넌트를 다음과 같이 수정합니다. src/component/Body.js import { useState } from "react"; function Body() { const [text, setText] = useState(""); const handleOnChange = (e) => { setText(e.target.value); }; cons..
지금까지는 값이 변하지 않는 정적인 리액트 컴포넌트를 만들었습니다. 지금부터는 사용자의 행위나 시간 변동에 따라 값이 변하는 동적인 리액트 컴포넌트를 만들 차례입니다. 이를 위해서는 리액트의 핵심 기능 중 하나인 State 를 알아야 합니다. 이번 절에서는 State 를 이용해 동적인 컴포넌트를 만드는 방법을 살펴보겠습니다. State 이해하기 State 는 상태라는 뜻입니다. 상태는 어떤 사물의 형편이나 모양을 일컫는 말로 일상 생활에서도 흔히 사용합니다. 상태는 전구와 스위치에 빗대어 상객하면 쉽게 이해할 수 있습니다. 스위치를 끄면 전구에 불이 들어오지 않는데, 이를 '소등 상태' 라고 할 수 있습니다. 반대로 스위치를 켜면 전구에 불이 들어오며 이를 '점등 상태' 라고 할 수 있습니다. 전구의 상..
