[앱개발] #3주차 리액트(컴포넌트, 상태, 속성, useEffect)

3주차에 배운 내용은?

리액트!

앱은 처음 배워보는 분야라서 더 쉽게 이해하려고 최대한 간단하게 정리해봤다.

 

💻 리액트 네이티브 앱을 만들어야 하기 때문에 리액트 관련 개념을 배웠다.

개념은 크게 4가지!

- 컴포넌트 Component

- 상태 State

- 속성 Props

- useEffect

 

01. 컴포넌트 Component

정해진 요소를 사용해 만든 화면의 일부분

UI 요소나 요소를 재사용 가능한 부분으로 쪼개 운영하는 기법

버튼, 버튼을 모아둔 영역, 글 영역 등 모든 영역은 컴포넌트가 될 수 있다.

 

컴포넌트를 간단하게 설명해주는 이미지가 있어 가져왔다🔻

https://www.blackthorn.io/wp-content/uploads/2022/02/5d24e6b7a10897107e824b59_e8455-18mqo8feswmmwjfgtlfvuig-p-1080.png

 

02. 상태 State, useState

컴포넌트에서 데이터를 유지하고 관리하기 위한 유일한 방법 == 사용할 데이터

리액트에서는 컴포넌트에서 보유/관리되는 데이터를 상태라고 한다.

리액트 라이브러리에서 제공해주는 useState로 생성할 수 있고

정하거나 변경은 setState 함수로 할 수 있다.

 

useEffect 함수

useEffect(()=>{
	//화면이 그려지면 가장 먼저 실행되어야 할 코드
}

 

03. 속성 Props

(상위) 컴포넌트에서 (하위) 컴포넌트로 데이터 전달

키, 벨류 형식으로 전달한다!

 

예)

<Text> 태그 : numberOfLines(말줄임표 효과)

<Image> 태그 : resizeMode(이미지가 영역을 차지하는 방식)

각각의 태그에는 오른쪽에 적어놓은 것처럼 가지고 있는 속성이 있다.

 

속성을 갖는 게 어떤 의미가 있을까?

-속성을 부여받은 컴포넌트에서는 해당 속성 값을 받아 사용할 수 있다.

 

 

04. useEffect

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