Props와 State
Props(Properties)
부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터.
부모 컴포넌트로부터 받는 것이라서 자식 컴포넌트에서 데이터를 변경할 수 없다. 이는 한 컴포넌트의 속성(Properties)과 같음을 의미한다.
State
한 컴포넌트 안에서 유동적인 데이터를 다룰 때 쓰이는 React 내장 객체.
컴포넌트 안에서 데이터인 State를 변경할 수 있다.
개발
지난 포스트에서 진행한 프로젝트로 실습하여 할 일 목록 앱을 만들어 본다.
App 컴포넌트
App.tsx 파일을 다음과 같이 수정한다.
(js 내부에서 css 자동 제안을 활성화시키기 위해 styled로 변경했다.)
브라우저 전체에 회색의 배경색을 추가하고 display: flex를 사용하여 추가될 컴포넌트들을 가운데 정렬하도록 스타일링된 단순한 컴포넌트이다.
Button 컴포넌트
추가 버튼
App.tsx 파일에서 다음과 같이 수정하여 추가 버튼을 구현한다.
styled-components를 사용하여 버튼을 단순히 디자인하였고, hover와 active를 사용하여 버튼 이벤트에 맞는 디자인을 추가하였다.
터미널에서 npm start를 입력하면 웹페이지에 추가라는 버튼이 표시된다.
삭제 버튼
이번에는 삭제 버튼도 생성해야하는데, 추가 버튼에서 만들었던 컴포넌트를 재사용하기 쉽게 ./src/Component/Button/index.tsx 파일을 생성하여 App.tsx에서 styled-components로 만든 Button과 Label 컴포넌트를 복붙한다.
기존에 export default를 쓰지 않고 export를 사용하였는데, 나중에 이 컴포넌트를 사용하려는 곳에서 import할 때 선언하는 방식이 조금 틀리다.
// export default인 경우
import Button from 'Component/Button'
// export인 경우
import { Button } from 'Component/Button'사실 이런 것들은 개인의 취향이라서 코딩 컨벤션에 맞춰서 쓰면 된다.
컴포넌트를 좀 더 쉽게 추가할 수 있도록 ./src/Component/index.tsx 파일을 생성하고 다음과 같이 수정한다.
이 파일은 컴포넌트를 추가할 때 편리하게 하려고 단순히 컴포넌트들을 export로 모아서 export하여 제공한다. Button 컴포넌트 파일에서 export로 제공되는 모든 컴포넌트(*)들을 가져와서(from) 다시 내보내는(export) 단순한 코드이다.
이렇게 생성한 Button 컴포넌트를 화면에 표시하기 위해 App.tsx 파일에 다음과 같이 수정한다.
3번 라인에서 컴포넌트를 쉽게 추가하기 위해 컴포넌트를 모아둔 ./src/Component/index.tsx 파일에서 Button 컴포넌트를 가져왔음을 알 수 있다.
26번 라인에서 Button 컴포넌트를 하나 추가하여 적용한 것을 확인할 수 있다.
터미널에서 npm start를 입력하여 로컬 웹페이지에서 확인해본다.
결론
React에서는 한번 만든 컴포넌트를 여러 곳에서 사용하는 컴포넌트 방식으로 웹서비스를 개발하게 되며, 한번 만든 컴포넌트를 재사용하므로 개발 퍼포먼스가 향상된다.
Github PR
