리액트 컴포넌트

피라미드 구조

 

컴포넌트란 ? 

전체 메인페이지의 가로스크롤로 구현했었던 버튼들의 모음이나 버튼 등 화면 구성의 일부 하나하나들을 컴포넌트라고 생각하면된다.

 

사람의 세포 같은 느낌 ? 

 

컴포넌트 : 정해진 요소들을 사용하여 만든 화면의 일부분

상태 state : 컴포넌트에서 데이터를 유지하고 관리하기 위한 유일한 방법  == 그냥 사용할 데이터 !

속성 props : 상위 컴포넌트에서 하위컴포넌트로 데이터를 전달하는 방식 == 그냥 데이터 전달 !

 

UseEffect : 화면에 컴포넌트가 그려지면 처음 실행해야 하는 함수들을 모아두는곳 

 

 

무수히 많은 컴포넌트로 ...

 

Ui 의 요소, 요소를 재사용 가능한 부분으로 

화면을 구성하는 요소의 한부분이라고 생각하면 된다. 

 

 

 

속성 을 다뤄보자 

->  데이터를 전달하는것 : 컴포넌트에 

 

전달모습은 ( Key, Value )  형태이다. 

 

<Text> 태그엔 numberOfLines 라는 속성이 있었다. 

 

<Image> 태그엔 resizeMode 라는 속성이 있다. - 이미지가 영역을 차지하는 방식을 나타낸다. 

 

 

 

비구조할당으로 받는것 ! 

컴포넌트의 데이터를 전달하는법 ? 

카드라는 컴포넌트 등등의 자스파일. 

컴ㅌ포넌트로서 우리가 만들수 잇었고 그 컴넌은 우리가 맘대로 이름을 지어거서 넘깃수 있엇다. 

 

카드 컴포넌트에서 받을때는 비구조할당방식으로 이름만 딱 지목해서 넘길수 있었다. 

넘겨주고 넘겨받는 방식을 말한다. 

 

 

순서>

 

1) 레디값이 true -> return 구문에서 ? 물음표 바로뒤의 LOading 컴포넌트가 화면에 그려진다. 

 

2) 화면이 그려지고 난 다음에 1.8초 이따가 상태값을이 채워지고 변경된다.

 

3) 레디값이 false 가 된다.

 

4) 상태값이 변경되었으므로 화면이 다시 그려진다. 

 

5)  ready 값이 False 이므로 return 구문에서 : 콜론 뒤의 mainPage 컴포넌트가 화면에 그려진다.