앱개발 강의 3주차 Note - (1) 앱 상세화면 만들기 - 앱 필수 기초지식

 

[복습] 나만의 꿀팁 앱 상세화면 만들어보기

 

DetailPage.js  파일을 하나 만들자.

App.js에 import 구문 넣어줘야된다.

return에는 DetailPage 넣기.

 

변수명을 쓰려고할 때는 { } 안에 감싸준다.

ex) <Text style={styles.title}>{tip.title}</Text>

 

그 자체에 고유한 영역이 있을 때, flex를 쓸 필요가 없다. (ex, textContainer, VIew)

내부에 여러가지 영역을 분배할 예정일 때는 써서 명시해주자.

 

 

[앱 필수 기초지식01] 컴포넌트

 

Component : 정해진 태그들을 사용해 만든 화면의 일부분

(메인, 어바웃, 디테일 페이지들 또는 그 페이지 안에 UI 요소들이 될 수도 있다. 분할해서 따로 관리한다.)

상태(State) : 하나의 파일을 뜻함. 그 안에서만 관리할 데이터

속성(Props) : 데이터를 전달하는 방식 (데이터를 전달한다)

useEffect : 화면이 앱에 그려질 때, 가장 먼저 실행되는 함수를 모아두는 곳.

 

분리해서 가지고 있으면 유지보수가 용이해진다.

 

우리가 만든 것들을 컴포넌트화 할 것이다.

components라는 폴더를 만들고, Card.js를 만들자.

(코드 붙여넣기!)

 

컴포넌트를 import로 가져와서, 코드에서 태그로 사용했다.

컴포넌트화.

 

MainPage.js에서 map 함수를 쓰는데, Card의 content를 반복 돌린다. 이 값을 Card.js로 데이터를 넘긴다. (속성을 넘기는 작업)

Card.js에서 fucntion Card({content})로 쓰였다.

 

app.js에서, return에 (<MainPage/>) 로 썼던 것 처럼.

 

 

[앱 필수 기초지식02] 속성(Props)

 

중요한 규칙. 

1. 컨텐츠라는 키값에 컨텐츠 데이터를 넣어줬다.

컴포넌트에 속성(데이터)을 부여해서 전달할 땐, 키 밸류 쌍으로 전달해야함.

 

2. 반복문 돌릴 때는, 고유한 부모 태그가 고유한 값을 가져야한다. 그래서 인덱스인 i를 넣었다.

 

Card.js에서 속성 값을 내려받게되는데,

이것이 비구조 할당 방식이다.

구조 자체를 변수 그대로 꺼내서 쓰는 방식.

 

어차피 딕셔너리가 넘어오니까 또 변수 선언해서 하지말고, 필요한 키값만 가져오기 위함. (코드를 간단히 하기 위함)

 

 

[앱 필수 기초지식03] 상태(useState)와 useEffect

 

리액트는 상태가 바뀌어야 화면이 바뀐다.

상태란, 컴포넌트에서 보유/관리되는 데이터.

state는 useState로 생성하고, setState함수로 변경 가능.

 

useEffect

사용방법은 정해져있다. 화면이 그려진 후에 가장 먼저 실행되는 함수.

데이터를 준비할 때 사용하는데,

데이터를 서버나 어디선가부터 받아서 상태에 반영하게된다.

화면이 그려지고 -> 서버에 데이터를 요청하여 받고 -> 상태 데이터가 update되어 화면이 다시 그려진다

 

//useState 사용법

  //[state,setState] 에서 state는 이 컴포넌트에서 관리될 상태 데이터를 담고 있는 변수

  //setState는 state를 변경시킬때 사용해야하는 함수

 

  //모두 다 useState가 선물해줌

  //useState()안에 전달되는 값은 state 초기값

  const [state,setState] = useState([])

  

 

  //하단의 return 문이 실행되어 화면이 그려진다음 실행되는 useEffect 함수

  //내부에서 data.json으로 부터 가져온 데이터를 state 상태에 담고 있음

  useEffect(()=>{

    setState(data)

  },[])

 

메인페이지가 화면에 그려졌다.

return 내용.

그 다음에, useEffect가 useState를 통해 상태를 관리한다.

근데 화면을 그리려고 했는데 오류가 나온다.

 

state는 리스트인데, 그 안에 아무것도 없다.

아무것도 없는 변수에서 아래 tip 이라는 값을 꺼내려고 한다. 그래서 오류다.

 

[기초지식 응용] 컴포넌트와 상태를 이용한 로딩화면 만들기

 

상태관리하기 전에는 데이터가 없다, 그래서 오류가 나는건 빈번하다.

 

그래서 로딩화면을 가운데 둔다.

const [state,setState] = useState([])

상태를 변경시킬 수 있는 함수하나와 변수하나를 가진다. 상태(데이터)관리를 하는 것.

Loading.js 만들기 (Components 폴더 안에)

 

ready와 setReady로 상태관리에 대한 또다른 변수와 함수가 된다.

지연 함수를 넣었다.

 

ready ? <Loading/> : ( ~

삼항 연산자다. ready가 true면 ?, false면 : 뒤에를 실행한다.

 

화면이 그려지고 useEffect가 실행되는데

2초있다가 setState(data), setReady로 false가 됨 -> 뒤에가 실행됨

상태값이 변경되면 화면이 변경된다.