프로젝트 준비하기
프로젝트를 구현하기에 앞서, 앱을 어떤 설계와 기능으로 구현할지 살펴보는 "요구사항 분석"이 선행되어야 함
요구사항 분석하기
이 프로젝트에서는, 현재의 카운트를 표시하는 영역을 뷰어(Viewer)라고 하고, 카운트를 제어하는 영역을 컨트롤러(Controller)라고 함
컴포넌트 단위로 생각하기
컴포넌트는 재사용이 가능한 수준에서 최대한 잘게 쪼개어 개발해야 함
! 하나의 컴포넌트는 단 하나의 역할만 수행한다
리액트 앱 만들기
> npx create-react-app .
사용하지 않는 파일과 코드 삭제
UI 구현하기
UI(User Interface)는 사용자 인터페이스라는 뜻으로, 웹 페이지에서 사용자와 상호작용하는 요소를 말함
Viewer 컴포넌트 만들기
...
Controller 컴포넌트 만들기
...
컴포넌트 스타일링하기
.App > section은 className=App 요소의 <section> 태그를 가리키는 CSS 문법
// App.css
body {
padding: 20px;
}
.App {
margin: 0 auto;
width: 500px;
}
.App > section {
padding: 20px;
background-color: rgb(245, 245, 245);
border: 1px solid rgb(240, 240, 240);
border-radius: 5px;
margin-bottom: 10px;
}
기능 구현하기
State를 이용해 카운터 기능 구현하기
버튼 클릭 이벤트가 발생했을 때 컴포넌트 값을 동적으로 렌더링하려면 리액트의 State를 사용해야 함
State는 어떤 컴포넌트에 만들까?
리액트는 State 값이나 set 함수를 여러 컴포넌트에서 사용하는 경우, 이들을 상위 컴포넌트에서 관리해야 하므로, 프로젝트에서는 App 컴포넌트에서 State를 만들어야 함 ( = State 끌어올리기 (State Lifting) )
// App.js
...
// component/Viewer.js
...
// component/Controller.js
const Controller = ({ handleSetCount }) => {
return (
<div>
<button onClick={() => handleSetCount(-1)}>-1</button>
<button onClick={() => handleSetCount(-10)}>-10</button>
<button onClick={() => handleSetCount(-100)}>-100</button>
<button onClick={() => handleSetCount(+100)}>+100</button>
<button onClick={() => handleSetCount(+10)}>+10</button>
<button onClick={() => handleSetCount(+1)}>+1</button>
</div>
);
}
export default Controller;
리액트답게 설계하기
리액트 앱을 설계할 때는, Props를 사용하는 데이터는 부모에서 자식으로, State를 변경하는 이벤트는 자식에서 부모로 향하도록 설계되어야 함
