[JAVASCRIPT 공부일지] 3주차 - 1 (리액트 기초 - 컴포넌트, 속성, 상태, useEffect)

리액트 네이티브로 앱 개발을 할 때 알아둬야하는 리액트 기초지식에 대해서 공부해보겠습니다.

---

<앱필수(=리액트 기초지식) - 컴포넌트, 속성, 상태, useEffect>

리액트의 간단한 과정을 살펴보자면, (컴포넌트 / 상태 / 속성)
** 컴포넌트에  Props(속성) 가 데이터를 전달해주면 컴포넌트 안에 있는 State(상태)가 그 데이터를 관리하게됩니다.

---

1. 컴포넌트 : 정해진 태그들을 사용하여 화면의 일부분들을 만드는 것을 말합니다.
ex) 페이지를 여러 개로 나눠서 작성하고 관리한 것조차 컴포넌트라고 할 수 있습니다.
ex) 버튼, 이미지, 전체화면조차 가능합니다.
ex) 크게는 "코드를 분할해서 관리했다"를 의미합니다.

2. State (상태)
: 컴포넌트 안에서 데이터를 관리하는 방법
: 하나의 파일, 페이지 등과 같은 의미입니다.
>> 리액트에서는 상태가 바뀌어야 화면이 바뀌게 됩니다. (=데이터에 따라서 화면이 바뀐다는 의미입니다.)
ex) 주식차트, 주식 프로그램

이처럼 실시간으로 그래프가 유동적으로 변화하는 모습인 앱은 리액트 네이티브로 구현할 수 있습니다.

실시간 상태 관리는 

UI = component(state)

라는 수식으로 간단히 표현할 수 있습니다.


3. Props (속성)
: 데이터를 전달하는 것
ex) ScrollView에 style을 통해 (딕셔너리값) 데이터를 전달해준것 = 속성
ex) Text태그에 너무 많은 텍스트에 말 줄임표를 사용하고 싶다면, NumberofLines라는 속성을 사용하면 됩니다.
      숫자 3을 전달해주면 말 줄임표로 3줄이상일경우  ... 이 찍혀있는 것을 확인할 수 있습니다.

** UseEffect
: 함수를 뜻하며, 앱이 켜졌을때 로그인이 실행되거나, 가장먼저 실행되어야하는 기능들을 useEffect에 담습니다.

useEffect( () => {

// ...화면이 그려진 다음 가장 먼저 실행되어야 할 코드를 작성하는 공간
// 주로 외부에서 데이터를 가져와서 준비시키는 과정을합니다.
// ex) 로그인 여부

}, [] )

---

<State(상태)로 data.json 데이터를 관리>

1.기존에 변수에 담아 쓰는 방식을 벗어나

2. 데이터를 불러온 후 

 import data from '../data.json';

3. useEffect함수로 화면을 그린 후 상태관리 

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

4. 리액트에서 제공해주는 useState 도구를 꺼내서 사용합니다.

import React,{useState,useEffect} from 'react';

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

이렇게 도구를 사용하겠다는 선언을 해주면 됩니다.

---

<undefined is not an object 오류가 발생하게 된다면?>

>> 이 state는 const [state,setState] = useState([])
로 되어있지만 리스트 안에 아무것도 없어서 오류가 발생하는 것입니다.

>> 화면을 보여줄때부터 데이터를 바로 보여주려고하니, 빈 리스트때문에 오류가 발생하는 것입니다.

>> 해결방법 : useEffect 상에서 초기화면을 구성할때 로딩화면을 보여준 후 데이터 준비가끝났을때 데이터를 보여주기
-  거의 모든 앱은  데이터를 준비하기 위해서 로딩화면이 있습니다.

(실습)

1. components 폴더 안에 Loading.js 를 만들고

2. 그 후 MainPage.js에서 로딩화면 페이지를 불러오고,

import Loading from '../components/Loading';

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

const [ready, setReady] = useState(true)
// 또 하나의 상태(준비중인 상태를 관리하는)를 선언했습니다.

3. useEffect 안에는 지연시간 함수 구현

//1초 뒤에 실행되는 코드들이 담겨 있는 함수
    setTimeout(()=>{
        setState(data)
        setReady(false)
    },1000)

---

<filter 함수>

state.filter((d)=>{ 
return d.category == cate
}))

자바스크립트 문법의 일종으로 map처럼 반복문의 종류입니다. 
차이점으로는 map은 반복만 시키는 반면, filter에는 조건문이 들어있습니다.

카테고리가 함수(cate)에서 넘겨온 카테고리와 같다면 그것만 반환해서 리스트로 만든다는 의미입니다.

따라서 filter는 조건에 해당하는 것만 골라서 리스트를 새로 만든 다음에
변수에다가 새롭게 구성된 리스트를 넘겨주게됩니다. (= 리스트를 새롭게 구성하는 기능)

---

다음 공부일지에서는 앱 화면에 '상태바'를 추가하는 방법에 대해서 알아보겠습니다.

'스파르타 코딩 클럽' 온라인 교육 플랫폼에서 배운 내용을 토대로 작성하였습니다.