컴포넌트

앱 개발에 필요한 필수 기초지식 중 하나로 컴포넌트에 대해 알아보자. 

페이스북 앱을 보면 쉽게 내용이 이해가 간다. 버튼, 화면 , 내용 등등 무수히 많은 컴포넌트로 구성이 되어 있다.

즉, 컴포넌트(Component)는 정해진 엘리먼트들로 만들어진 화면의 일부분 모두를 가르킨다. 

 

그림을 간단히 이해해보자면, 무수히 많은 컴포넌트들에서 데이터를 전달받고 그 데이터를 관리한다고 보면된다.

 

컴포넌트에서 데이터를 관리하고 유지하는 방법은 State

상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 방식은 Props 이며, 하위 컴포넌트에서 상위 컴포넌트로 데이터를 전달할 순 없다.

 

그리고 useEffect 라고 화면에 컴포넌트가 그려지면 처음 실행해야하는 함수들을 모아둔 곳으로 알아두고 넘어가자!

 

 

1. 컴포넌트

컴포넌트는 UI의 요소들을 재사용가능하도록 조각내서 운영하는 기법이라고 한다!

전체화면 , 버튼, 화면, 모든것들이 컴포넌트라고 볼 수 있다. (페이스북은 컴포넌트가 만가지가 넘는다니!!!)

 

이렇게 구현되어있을경우 유지보수가 굉장히 수월하다는 장점이 있다고 한다.

(특정 컴포넌트만 수정하면되기떄문)

 

예를들어,

 

지금 실습하고 있는 나만의 꿀팁 메인화면을 컴포넌트화를 만들어보면

보통, 컴포넌트들은 components 폴더를 만들어서 관리를 한다고 한다. ( 최대한 헷갈리지 않고 관리할 수 있도록)

그런다음 메인화면에 카드형태로 쭉 나열되어 있는 꿀팁들을 Card.js를 만들어서 코드를 옮겨보자!

 

세부코드들은 집에서 보면서 다시 되짚어보는걸로 하고 어떤흐름으로 진행되는지 이해만 하고 넘어가자.

 

  <View style={styles.cardContainer}>          

{/* 하나의 카드 영역을 나타내는 View */}          

{           

     tip.map((content,i)=>{            

         return (<Card content={content} key={i}/>)   

 

mainPage.js 에서 card.js를 임포트는 해주면 card.js를 가져와 뿌려줄 수 있다.

 

이렇게 분리해서 컴포넌트를 관리하는경우

mainPage.js 뿐만아니라 다른 페이지에서도 card.js를 가져와 사용할 수 있다.