[포스코 x 코딩온] 풀스택 웹 개발자 부트캠프

[포스코 x 코딩온] 풀스택 웹 개발자 부트캠프 React - Component

jonghyeon6084 2023. 9. 26. 20:00
728x90

Component 란??

 - React의 핵심이라고 할 수 있다. 

 - MVC view를 독립적으로 구성해 재사용할 수 있고, 새로운 Component도 만들 수 있다.

 - 데이터(props)를 입력받아 view 상태(state)에 따라 DOM Node를 호출

 - UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 코딩이 가능.

 

 

클래스형 Componenet

 - state와 라이프 사이클 기능 이용 가능

 - Render 함수 필수

 

 

함수형 Component

 - 짧고 직관적

 - Vanilla JS와 같은 기본적인 function 구조를 이용해 더 직관적이며 추상적

 - 메모리 자원을 덜 사용한다.

 - 요즘은 클래스형은 거의 안쓰고 대부분 함수형 Component를 사용한다.

 

 

Component들을 가져오는 법 예시

 

React를 배우기 전 프로젝트를 진행할 땐 React를 배우지 않아서 ejs로 페이지들을 만들었었는데 react를 배우면서 느낀 점들은 Component를 사용해서 정말 직관적으로 코드를 짤 수 있다는 걸 알게 되어서 더 흥미가 생겼고, 앞으로 더 공부하여 react를 효과적으로 사용해 보자.