Component

리액트 공부에 도움되는 사이트 목록

- CodeSandbox : 리액트에서 만든 결과를 바로 볼 수 있음

- toolchain

 

Component에 본격적으로 들어서기 앞서 개괄적으로 정리해보았다.

react의 component는 javascript에서 사용하는 사용자 정의 태그와 비슷하다.

 

component의 장점

1. 가독성
2. 재사용성
3. 유지보수 -> 실시간으로 변경된 내용이 업데이트된다.

개발 환경 설정할 때 만들어놓은 샘플을 예로 들면,

샘플 폴더 안에 있는 src에 App.js를 살펴보면 Component를 볼 수 있다.

 

사진에 나오는 index.js의 <App />이라는 것이 js로 말하면 사용자 정의 태그이고, react에서는 컴포넌트라고 볼 수 있다.

 

원래는 함수형인데 클래스형으로 바꾸었다.

사진에 나오는 클래스 안에 있는 내용이 컴포넌트의 실제 구현이다. 이 내용을 수정하면 앱 내용을 수정할 수 있다.

그래서 해당 부분을 아래와 같이 변경하면 웹 페이지가 달라지는 것을 알 수 있다.

 

소스를 바꾸었음

 

App 컴포넌트의 형식대로 새로운 컴포넌트를 만들 수 있다.

형식을 지킬 때 클래스 안에서는 하나의 최상위 태그만 써야한다.

 

Subject라는 컴포넌트를 만들어서 App 클래스 안에 넣었다.

 

저장하고 웹 페이지를 보면 바뀐 것을 알 수 있다.

 

웹 브라우저의 코드를 보면 방금 만든 <Subject>태그가 아닌 <header>태그로 나와있다.

리액트는 최종적으로 웹 브라우저에게 html 코드를 제공해주므로 웹 브라우저의 코드를 보면 모두 html 형식으로 들어간 것을 볼 수 있다.

 

우리가 컴포넌트를 만들 때 사용한 코드는 JavaScript가 아닌 JSX이다.

create-react-app이 알아서 JSX를 JavaScript로 컨버팅해주는 것이다.

 

참고

• 생활코딩