전화번호부 프로젝트를 여러 개의 컴포넌트로 나누고 각각의 컴포넌트에 스타일을 설정하는 방법을 알아봅시다.
하나의 컴포넌트에서 모든 코드를 짠다는 것은 보기 힘든 것은 물론이고 유지 보수, 새 기능 추가 등 여러 방면에서 불편한 점이 많을 것입니다. 단순히 HTML, CSS, Javascript를 사용해서 짜는 게 리액트를 사용한 것보다 훨씬 직관적일 수도 있는 거죠. 저희는 이 페이지에서 App.js에 있는 코드를 여러 개의 컴포넌트로 나눠보고, 각각의 컴포넌트에 스타일을 정해주는 방법을 배워봅시다.
또, 1~5페이지까지는 컴포넌트마다 css 파일을 만들어 적용함으로써 컴포넌트를 스타일링 할 것입니다. 하지만 6~8페이지에서는 다른 방법들을 소개하려 합니다. 해당 페이지를 참고하시고 자기의 스타일에 맞는 스타일링 방법을 사용해보세요!
프로젝트 폴더는 아래 링크에서 확인할 수 있습니다.
https://github.com/ji5485/2019-LikeLion-React-Tutorial/tree/master/react-tutorial-3
1. Split PhoneBook Project (1)
2. Split PhoneBook Project (2)
3. Split PhoneBook Project (3)
4. Split PhoneBook Project (4)