리액트는 최대한 세세하게 쪼갠다 >> 컴포넌트가 꼭 필요하다.

 

컴포넌트는 '트리구조'를 가지고 있다.

 

큰 단위부터 아래로 하나하나씩 쪼갠다.

 

- 함수형 컴포넌트

짧고 직관적

바닐라 js와 같은 기본적인 함수 구조를 이용해 더 직관적이며 추상적이다.

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

기본형 ▼

 

- 클래스형 컴포넌트

스테이트 라이프 사이클 기능 이용 가능

랜더 함수 필수

생성자 존재

기본형 ▼

 

>> 요즘은 다 함수형 컴포넌트를 사용한다. 

 

클래스형 컴포넌트에 스테이트등을 적용하면 매우 어려워진다.

 

컴포넌트는 대문자로 입력해야지 인식한다.

 


props

properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소

props는 컴포넌트끼리 값을 전달하는 수단이다.

상위 컴포넌트에서 하위 컴포넌트로 전달한다.

<컴포넌트 이름 title="제목" content = "내용"></컴포넌트 이름>

- 함수형 컴포넌트 props

- defaultprops

- props.children

부모 컴포넌트에서 자식 컴포넌트를 호출할 때 태그 사이에 작성하여 불러옴

-propsType

- 클래스형 컴포넌트 props

this를 붙여서 사용해야한다.

 

 

+ Recent posts