React 기초 정리 1편에서 기본적인 컴포넌트에 대해서 정리했습니다.
프론트엔드 개발자라면 누구나 지나왔던 루트를 보시면, 처음에 웹 화면에서 뼈대가 되는 HTML을 공부한 후, 이를 UI적으로 보기 좋게 스타일링 하기 위해 CSS를 공부합니다. 그래서 이번 장에서는 css스타일 추가하는 방법과 컴포넌트끼리 데이터를 주고 받는 방법, 그리고 컴포넌트 분리에 대해서 정리 해보겠습니다.
스타일링
리액트에서 css를 사용하기 위해 특화된 방법은 없습니다.
일반적인 HTML, css 코드와 같은 방식으로 작성해주시면 됩니다.
App.js를 스타일링 하기 위해 App.css 파일을 생성해보겠습니다.
HTML에서는 link 태그를 이용하여 head에 추가해서 사용했습니다.
하지만, 리액트에서는 import를 어디에 해와야할지 의문이 생깁니다.
public파일에 들어가서 index.html에 link를 추가해야 할까요?
아닙니다. 그러면 index.html에 수많은 css 파일을 import하게 됩니다. 즉 필요한 css만 다운로드되어야 하는데, 불필요한 css까지 다운로드되고 다운받는 시간만 길어지게 됩니다.
그러면 어떻게 import 시켜야할까요?
위와 같은 방식으로 작성해주면됩니다. import 시켰을 경우, 리액트가 해당 파일을 읽게되고 스타일링을 적용시켜줍니다.
css를 위와 같이 작성했습니다.
이제 HTML태그 즉, JSX 문법에 적용 시켜야합니다.
분명히 리액트를 처음 접하는 분들은 class="wrapper" 를 삽입 할 것입니다.
그럴 경우, 스타일링이 적용되지 않습니다.
말씀 드렸듯이, JSX는 HTML이 아니기때문에 똑같은 방식으로 작성하면 안됩니다.
결국 여전히 JS 코드입니다.
그래서 class가 아닌 className으로 적어줘야합니다.
위와 같이 작성해주시면, 스타일링이 잘 적용된 화면을 볼 수 있습니다.
컴포넌트의 분할
컴포넌트단위로 개발을 한다는 것은 작고 쉽게 나누어 분리 할 수 있다는 장점을 가진다고 기초 정리 1편에서 얘기한 적이 있습니다.
작은 단위로 나눌 수 있다는 것은 컴포넌트를 분할 할 수 있고, 분할한 컴포넌트는 언제든 재사용 할 수 있습니다.
위 사진을 참고 해보겠습니다.
사실 컴포넌트의 단위가 커지는 것을 보고 작게 나누어야하나, 지금은 작업을 진행하기 보단 개념을 정리하는데 집중하기 위해 간단한 예를 들겠습니다.
h2 태그의 경우 title은 언제든 재사용 할 수 있습니다.
컨텐츠마다 title이 필요하니깐요.
그럼 Title이라는 컴포넌트로 분리 해 볼 수있습니다.
먼저, Titls.js라는 파일을 생성 후, 컴포넌트를 만들어줍니다.
function 앞에 export default가 붙은걸 확인 할 수 있습니다.
즉, 다른 컴포넌트에서 해당 컴포넌트를 import 해올 수 있다는 뜻입니다.
위의 사진 처럼 말이죠.
컴포넌트를 import 한 뒤, HTML 태그처럼 사용하여 가독성도 좋아지고 어느 컴포넌트에서든 import와서 쓸 수 있는 재사용성도 증가 했습니다.
useState를 정리하는 시점에서 해당 내용은 한번 더 정리 해볼까합니다. 미리 간단하게 정리를 해보자면, 재사용성뿐 아니라 최적화에 있어서도 컴포넌트를 나누기도 합니다.
props 넘기기
자 이제 재사용성이 증가했기 때문에, 재사용하기 위해 다른 컴포넌트에서 해당 Title이라는 컴포넌트를 또 재사용 해보려 합니다.
하지만, 한가지 문제가 있죠.
바로 다른 컴포넌트에서는 제목을 Hello World!가 아닌 다른 텍스트를 사용하고 싶습니다.
이럴 경우 어떻게 해야 할까요?
그냥 Title2라는 컴포넌트를 하나 더 생성할까요?
당연히 아닙니다.
여러가지 방법이 존재하지만, 지금은 props를 정리해보려 합니다.
props란?
부모의 컴포넌트가 자식 컴포넌트에게 넘겨주는 data
일반적으로 HTML 태그에서는 부모가 자식에게 data를 줄 수는 없습니다. JS로 선택자를 잘 고려하여 로직을 구현 할 뿐이죠.
하지만, 컴포넌트에서는 props를 사용 할 수 있습니다.
Title이라는 컴포넌트가 Hello World! 라는 문구말고 언제든 유동적으로 텍스트를 바꾸길 원합니다. 이럴 경우 원하는 텍스트를 Title이라는 컴포넌트에 props로 넘겨주는 겁니다.
위의 사진 처럼 말입니다.
아직은 감이 오지 않으니 Title.js로 가서 콘솔로 확인 해보겠습니다.
콘솔의 결과는 어떨까요?
props는 title이라는 key값에 App.js에서 전달한 Hello Korea!라는 텍스트를 value로 가지는 객체라는걸 확인 할 수 있습니다.
정리를 해보자면
App.js => App이라는 부모 컴포넌트
Title.js => Title이라는 자식 컴포넌트
title={"Hello Korea!"} => 자식에게 넘겨주는 props
입니다.
그렇다면 props는 한번만 넘겨 줄 수있을까요?
당연히 아닙니다. props로 배열, 객체, number, string, boolean 어떠한 타입이든 몇 가지든 다 props로 넘겨줄 수 있습니다.
es6 문법을 적용해서 좀 더 코드를 깔끔하게 정리 해보면
이렇게 정리 할 수 있습니다.
props의 정의를 살펴보면, 함수라는 개념과 비슷한 구석을 발견 할 수 있습니다.
비즈니스 로직을 구현할 때, 하나의 함수는 한가지의 역할만을 목표로 작성합니다.
그리고 함수에 어떤 파라미터를 넣느냐에 따라, 로직의 결과는 완전히 반대가 될 수도 있죠.
컴포넌트도 마찬가지 입니다. 앞서 기초 정리에서 컴포넌트도 HTML을 반환하는 "함수" 라고 표현했습니다.
네, 함수 입니다. 때문에 어떤 파라미터를 넣느냐에 따라 반환하는 값도 다르게 할 수 있습니다. 이걸 함수에서는 파라미터라고 부르던걸, 컴포넌트에서는 props라고 명합니다.
이번 정리는 여기까지 하겠습니다.
다음 정리에서는
state, 이벤트 리스닝 및 핸들러에 관해 정리하고자 합니다.
