[react 리액트] 컴포넌트 Component 생성, import, export

 

리액트의 가장 큰 특징은 컴포넌트(사용자 정의 태그)가 있다는 것

 

 

1. 컴포넌트(Component)란?

1) 재사용이 가능한 독립적인 모듈
2) 레고에서 하나의 블록 또는 한 파츠 (블록 덩어리)
3) 특정한 기능을 수행하기 위해 구성한 작은 기능적 단위
=== 특정 기능을 수행하는 코드 덩어리를 '태그'로 만든 것.
 
 
 

2. 컴포넌트는 왜 필요한가?

1) 여기 1억줄 짜리 코드가 있다 치자

<header>

    <div>1억줄 코드</div>

   <div>다른 1억줄 코드</div>

   <div>또 다른 1억줄 코드</div>

</header>

2) 이게 한 파일에 있으면 관리도 힘들고 찾기도 힘들고 가독성도 떨어지지 않을까?
3) 그래서 이걸 간단하게 태그 하나에 담는 것이다.
<FirstComponent></FirstComponent> 이런 식이나
<FirstComponent /> 이런 식으로 
너무 깔끔하다^.^
 
 
 

3. 컴포넌트 만들기

1) 쉽다 함수에 담으면 끝 (*단, 컴포넌트는 첫글자가 대문자여야한다)
2) JSX 로 표현 가능

// '컴포넌트'는 함수로 만든다 = 사용자 정의 태그

function Header(){

  return <header>

    <h1>1억줄 코드</h1>

    </header>

}

 
※ 여기서 주의! ※

1) 최종적으로 하나의 태그로 감싸줘야 함. === JSX는 하나의 태그만 감싸기 때문.

 

2) return 을 꼭 해줘야 함.
 
 
 

4. 컴포넌트 사용하기

1) 일반 태그하듯 <태그명></태그명>
2) 또는 <태그명/>

function App() {

  return (

    <div>

      <Header></Header>

      <List />

    </div>

  );

}

 
 
 

5. 컴포넌트 import , export 하는 법

1) 긴 코드 자체가 꼴보기 싫다면 따로 빼서 다른 파일에 작성한다.
2) 그 컴포넌트가 담긴 파일을 export 하고 (어떤 이름으로 export할지 함께 써야 함)
3) 컴포넌트를 사용할 파일에서 import 한다. (어떤 이름을 어떤 파일에서 가져왔는지 써야 함)

 
4) 현재 파일과 동일한 폴더 안의 파일을 가져오고 싶다면?

'./Name.js' (점 하나)

 
5) 현재 파일보다 상위 폴더에서 파일을 가져오고 싶다면?

'../Name.js' (점 두개)

 
6) 현재 파일보다 상위 폴더의 다른 폴더에서 파일을 가져오고 싶다면?

'../다른폴더이름/Name.js'

 

 

 

6. 컴포넌트가 화면에 그려지는 과정

 

1단계: 랜더링 발생

- 랜더링(Rendering)이란 가장 최신 버전의 컴포넌트 상황을 가져오기 위해 컴포넌트를 실행하는 것.

- 랜더링은 2가지 경우에 발생

1) 최초 앱 실행 시 (또는 새로고침) : initial rendering

2) state 값이 변경되었을 때 (setter 함수에 의해) : re-rendering

 

 

2단계: 컴포넌트 랜더링 수행하기

1) 최초 앱 실행 시 (또는 새로고침) : 루트(root) 컴포넌트 실행 (+ 그의 모든 자식 컴포넌트)

2) state 값이 변경되었을 때 : state 값을 가진 컴포넌트 (+ 그의 모든 자식 컴포넌트)

 

 

3단계: DOM에 변경사항 반영하기

- 리액트는 가장 최소한의 변경사항만 DOM에 반영하기를 원함!

- 따라서 변경된 부분만 DOM에 반영 됨

 

 

4단계: 브라우저가 화면 다시 그리기 (Painting)

- 변경된 DOM을 브라우저는 화면에 다시 그림