앱개발 3주차_02

jyooooooung·2023년 2월 24일

리액트 컴포넌트

앱개발_리액트네이티브

목록 보기

5/8

리액트 기초 지식을 배워보자

👻😏 앱개발을 처음 하는 사람들이 꼭 알아야 되나??

앱에 더 풍부한 기능을 담고 구현을 하기 위해서는 기초 지식을 알아야 합니다 :)

리액트는 어떻게 생겼을까?

< Component />에 Props라는 아이가 데이터를 전달해주면 State가 데이터를 관리한다.

컴포넌트(Component)란?

컴포넌트 속성이라는 것은 코드를 분할했다는 얘기입니다.(분할해서 따로 관리한다.)
정해진 태그(엘리먼트, 요소)들을 사용하여 화면의 일부분을 만드는 것입니다.
어바웃페이지, 메인페이지, 디테일페이지 모두 컴포넌트로 볼 수 있습니다.
컴포넌트 = 하나의 페이지 = 하나의 파일(조그만한 버튼도 컴포넌트입니다.)
실제 페이스북에서는 버튼, 텍스트, 사진, 로고 등등을 2만, 3만 가지의 컴포넌트로 쪼개서 관리한다고 합니다. 하나의 컴포넌트가 오류가 나도 전체 페이지가 망가지지 않기 때문입니다.
컴포넌트 예시(디테일페이지의 카드 부분을 컴포넌트하기)

import Card from '../components/Card';

Card.js에 카드부분을 분할하여 디테일페이지에서 import한다.

<View style={styles.cardContainer}>
        {/* 하나의 카드 영역을 나타내는 View */}
        {
         tip.map((content,i)=>{
           return (<Card content={content} key={i}/>)
         })
       }
       
     </View>

코드에서 Card를 불러와서 사용한다.
🐰 content={content}를 통해서 데이터 전달하기

상태(State)란?

리액트는 상태(데이터)가 바뀌어야 화면이 바뀐다?

UI = component(state)

😲 사용자 화면(UI)는 컴포넌트(component)에 어떤 데이터(state)가 주입되고 변경되냐에 따라 변화된다는 의미!!

컴포넌트마다 데이터를 보유하고 관리 할 수 있습니다. 데이터라고 불러도 되지만, 리액트에서는 컴포넌트에서 보유/관리 되는 데이터를 상태라 부릅니다.
컴포넌트에서 데이터를 유지하고 관리하기 위한 유일한 방법 == 그냥 사용할 데이터!
컴포넌트 안에서 관리할 데이터

속성(Props)란?

컴포넌트에 데이터를 전달하는 것!
전달 모습은 키와 벨류의 형태
- ex) <Text> 태그엔 numberOfLines이란 속성(말줄임표), <Image> 태그엔 resizeMode란 속성(이미지가 영역을 차지하는 방식)
- <Card image={'이미지 주소'}/> 로 키와 밸류의 형태로 속성을 부여하면 해당 컴포넌트(Card.js)에서 값을 내려받아 사용할 수 있습니다.
- 컴포넌트에 속성(데이터)을 부여해줘서 전달할땐, 키와 벨류(content={content}) 형태로 전달해줘야 할 것
- 컴포넌트를 반복문 돌릴땐, 컴포넌트마다 고유하다는 것을 표현하기 위해, map에서 나오는 인덱스(i)를 key = {i} 속성 전달 형태로 꼭 넣을것! ✨🎇 (props라는 딕셔너리에서 바로 변수로 선언되는 비구조 할당 방식)
상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 방식 == 그냥 데이터 전달!
ex) StyleSheet

-> 스타일 딕셔너리

스크롤뷰에 스타일 딕셔너리 옷을 입혔다.
= 스타일 딕셔너리 값을 스크롤뷰에 전달해주는 것!
= 스타일을 태그의 속성이라고도 한다!

useEffect란?

(함수 이름이라고 생각하기!)

쉽게 얘기해서 함수이다.
result 함수를 통해 화면이 앱에 그려질때 그려진 후에 가장 먼저 실행되는 함수이다.
화면에 컴포넌트가 그려진 후 가장 먼저 실행해야 하는 함수들을 모아두는 곳

useEffect(()=>{

	...화면이 그려진 다음 가장 먼저 실행되야 할 코드 작성 공간

},[])

주로 외부의 데이터들을 불러와서 준비시키는 과정을 담당한다.

상태와 useEffect

로직의 흐름
1. 메인 페이지가 화면에 그려진다.
2. useEffect로 Data.js에서 불러온 데이터를 setState를 통해서 상태 관리를 시작한다.

 useEffect(()=>{
    setState(data)
  },[])

3.let tip = state.tip; 를 보면 state에서 tip을 불러오고 있습니다.
4. 하지만 const [state,setState] = useState([])을 보면 상태관리를 하기 위해 처음에 초기화 했던 useState가 줬던 상태 변수인 stated에게 빈 리스트인 []을 넘겨줬습니다.
//state = [] 리스트 안에는 아무 값도 없습니다.
5. 아무것도 없는 값을 활용하였기 때문에 오류가 납니다. -> 데이터가 준비될 때까지 로딩 페이지를 보여주고 데이터가 준비되어 상태관리에 들어가면 그때 let tip = state.tip;가 성립되지 않을까요??