📌 ReactNative 에서의 UI

🕹 style

ReactNative 의 스타일은 StyleSheet.create 메서드를 사용해 컴포넌트에 style props를 전달하는 방식을 사용한다.

따라서, 문법 규칙이 자바스크립트 object 작성시와 동일하다.

예를 들어 글씨 사이즈와 색을 바꿔주는 스타일을 적용 시키려 할때,

const styles = StyleSheet.create({
  MyFont: {
    fontSize: 30,
    color: 'red'
  }
})

StyleSheet.create 로 만든 MyFont 를

<View>
  <Text style={styles.MyFont}> 안녕하세요 </Text>
</View>

형식으로 전달해주면 된다.

❗️ 기존(css) 방식과의 차이점

// CSS
display: flex;
justify-content: space-around;
font-weight: bold;
font-size: 12px;
flex: 1 1 auto;

// ReactNative display: 'flex', justifyContent: 'space-between', fontWeight: 'bold', font-size: 12, flexGrow: 1, flexShrink: 1, flexBasis: 'auto',

- 속성명을 작성할때, 단어구분을 카멜케이스로 구분한다.

- 속성값의 경우에는 문자열 형식으로 작성

- 스타일 속성 구분을 `,` 로 구분한다.

- px과 같은 단위 생략, 적용되는 단위는 대상 OS마다 다르다.
(ios는 논리픽셀, android는 DP)

- 축약형 사용이 불가능하다.

- 스타일 적용 우선순위가 적용방식에 따르지않고, 가장 나중에 전달되는 스타일이 우선순위가 높다.

- `display` 속성 값이 `flex` 와 `none` 두개뿐이다.

- `flexDirection` 의 기본값이 `column` 이다.



### 🕹 tag

html의 태그들처럼 기본적으로 제공하는 컴포넌트들이 있다.


**View** 

`div` 와 유사하다, 중첩이 가능하다.
하지만, `margin`/`padding`/`border` 박스모델 속성적용이 불가하다.

----

**SafeAreaView**

기기의 안전한 영역 경계 내, 콘텐츠를 렌더링, 자동으로 padding을 적용
(기기의 코너부분, 베터리표시 등의 도구모음과 영역이 겹치지 않게)
페이지의 최상위 Wrapper 컴포넌트로 많이 사용

---
**ScrollView**

내부 컨텐츠에 따라 자동적으로 스크롤 생성이 되지 않는 ReactNative에서
스크롤이 필요할때 사용,
`position: fixed` 가 불가능하지만 ScrollView를 사용해야만 스크롤이 생성되기에 고정된 UI 구현이 가능하다.

----
**KeyboardAvodingView**

키보드가 올라올 경우, 컨텐츠가 가려지는 문제를 해결하는 컴포넌트
behavior props로 회피 방법 설정 가능
input 사용 컴포넌트에서 필수적

---
**FlatList**

목록이 길어지면 자동적으로 내부에 ScrollView적용, 
아래로 당겼을시 refresh 기능을 props로 설정 가능


----
**Text** 

텍스트를 표현하기 위한 컴포넌트, 중첩이 가능하다.
>
```js
<View>
    <Text style={{fontWeight:'bold'}}>
        입력된
        <Text>텍스트</Text>
    </Text>
</View>

TextInput

텍스트 입력을 위한 컴포넌트

Touchable

다양한 Touchable 컴포넌트가 있지만, 앱 내 터치요소 통일성을 해칠 가능성이 있기에, 적절한 하나의 Touchable 컴포넌트를 기본으로 사용하는걸 추천.

• button 기본적 버튼 컴포넌트이지만 스타일링이 불가능해 활용도가 떨어짐

• TouchableHighlight 터치 시 하이라이트 발생, 내부에 하나의 자식컴포넌트가 필수/둘 이상의 자식요소라면 그룹화(<></>) 필요

• TouchableOpacity 터치 시 투명도 값이 적용, 내부에 여러 자식컴포넌트 가능

Image

이미지 표현에 사용되는 컴포넌트, source props에 경로 전달 필요

<View>
  <Image 
   source={{url:'이미지주소'}}
  />
</View>

❗️ 앱 내부 이미지파일 불러올땐 require , 네트워크 이미지/데이터 불러올땐 이미지의 사이즈영역 확보 필요

ImageBackground

배경이미지를 넣을때 사용

<View>
  <ImageBackground source={{uri: '이미지주소'}}>
      <Text> 안녕하세요 </Text>
  </ImageBackground>
</View>

Modal

기존 모달창과 같이 작동, 기존 레이아웃 위에 노출 항상 뷰포트 전체 크기값을 가짐, 설정 필요

🕹 props

ReactNative 에는 style props 외에 UI렌더링에 영향을 주는 props들이 많다.

numberOfLines,ellipsizeMode

텍스트의 말줄임 처리를 Text 컴포넌트에 numberOfLines / ellipsizeMode 를 props로 주어 사용한다.

• numberOfLines 에 말줄임이 될 라인수를 전달

• ellipsizeMode 에 'head','middle','tail','clip' 값을 주어 말줄임 방식을 조정 head 는 글의 첫 부분, middle은 가운데, tail은 끝, clip은 '...' 같은 줄임표시 없이 텍스트 자르기

보통 tail 형식이 보편적으로 사용되는것 같다. (기본값이 tail이다)

hitSlop

터치영역을 눈에 보이는 영역보다 확장할 경우, padding을 정교하게 계산하여 사용하기 어렵기에 주변 요소의 렌더링에 영향을 주지않고 터치영역만 증가시킬수있다.

<View>
  <TouchableHighlight hitSlop={{top:10,right:10,bottom:10,left:10}}>
      <Text> 버튼 </Text>
  </TouchableHighlight>
</View>

contentContainerStyle

ScrollView 를 사용할 때, 컨텐츠 내용이 부족해도 ScrollView 만큼 영역을 확보해야하는경우, flexGrow: 1 을 사용해 확보가 가능하다.

<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
    <View>
        <Text>확보 영역</Text>
    </View>
</ScrollView>

👍 참고

• https://wit.nts-corp.com/2020/03/23/6014

📌 ReactNative에서 flex 는

ReactNative 를 사용하여 화면을 구성할 때, web 과는 조금 다른 부분이 있다.

flex 를 사용하여 모바일 화면 안에서 얼마만큼을 사용 할지 비율로써 조정이 가능하다는 것이다.

예를 들어, App 화면을 정확히 반반 나누고 싶다는 가정을 해보면,

const App = () => {
    return(
        <View style={styles.Wrapper}>
              <View style={styles.Container01}></View>
              <View style={styles.Container02}></View>
          </View>
    )
      const styles = styleSheet.create({
        Wrapper: {
            flex: 1
        },
        Container01: {
          flex: 1
        },
          Container02: {
          flex: 1,
          backgroundColor: 'red'
        },
    })
}

위의 결과물에 대한 화면은 아래와 같다.

❗️ 전체를 감싸는 Wrapper 라는 녀석은 화면전체(flex:1) 를 사용하고 있고, 자식요소로 들어간 Container01 와 Container02 는 부모요소를 1 : 1 비율로 차지하게 되는것이다.

이를 활용하면, 이렇게도 만들 수 있다

const App = () => {
  return (
    <>
    <View style={styles.Container}> 
    </View>

    <View style={styles.container2}>
      <View style={styles.button01}>
        <Text style={styles.menuFont}>Menu01</Text>
      </View>
      <View style={styles.button01}><Text>Menu02</Text></View>
      <View style={styles.button01}><Text>Menu03</Text></View>
      <View style={styles.button01}><Text>Menu04</Text></View>
    </View>
    </>
  )
}
const styles = StyleSheet.create({
  Container: {
    flex: 1,
    alignItems: 'center',
    justifyContent:'center',
  },
  container2: {
    flex: 0.1,
    flexDirection: 'row',
    backgroundColor: 'red',
    alignItems: 'center',
    justifyContent:'space-around',
  },
  button01: {
    width: '25%',
    display: 'flex',
    height: '100%',
    textAlign: 'center',
    alignItems: 'center',
    justifyContent: 'center',
  },
  menuFont:{
    fontSize: 12,
  }
})
export default App;

시작에 앞서, 설치자의 환경에 따라 설치방법이 달라지는데 아래 내용은 Mac 기준 / android 앱 구축 설정이다.

OS별 / 개발대상 OS 별 설치는 https://reactnative.dev/docs/troubleshooting#content <-공식 문서를 참고

React-Native 를 통한 android App 개발을 위해서는 Node Watchman JDK AndroidStudio 가 필요하다.

📍 Homebrew

Node 와 Watchman 을 설치하기 위해서는 Homebrew 를 이용하여 설치한다.

Homebrew 는 Mac에서 필요한 패키지를 설치하는 관리자 역할을 한다.

• Homebrew 설치 : https://brew.sh/

설치가 완료되면 brew --version 로 버전 확인이 가능하다.

이후, Homebrew 를 사용해 Node / Watchman 을 설치한다.

📍 Node

• Node 설치 : brew install node

• Node 버전 확인 : node --version
  ❗️ Node가 설치되면 기본 패키지 매니저인 npm 또한 설치되는것을 확인해준다.
• npm 버전 확인 : npm --version

📍 Watchman

❕ Watchman은 특정 폴더/파일에 변화가 생기면 특정 동작이 실행되도록 설정해주는 역할을 한다.

• Watchman 설치 : brew install watchman

• Watchman 버전 확인 : watchman --version

📍 JDK

❕ JDK는 자바 개발 키트의 약자로, Java로 소프트웨어를 개발할 수 있도록 여러 기능을 제공하는 패키지다.

• JDK 설치 : brew install -- cask adoptopenjdk/openjdk/adoptopenjdk8

❗️ 설치된 JDK는 JDK 8 이상이여야 한다.

📍 Android Studio

안드로이드 스튜디오 설치에는 사용자마다 고려사항이 많기에 [React-Native 공식문서] (https://reactnative.dev/docs/troubleshooting#content) 의 Android Studio 설치 부분을 읽으며 따라가는것이 좋다.

🕹 애플리케이션 만들기

위 과정을 모두 완료하였다면, 이제 codeEditor 에서 새 프로젝트를 생성한다.

• npx react-native init 프로젝트명

• 만약 개발을 위해 특정 버전을 지정하여 설치를 해한다면, npx react-native init 프로젝트명 --version X.XX.X

• 사용자 지정 React-Native 템플릿으로 개발을 시작할경우(ex. Typescript), npx react-native init 프로젝트명 --template react-native-template-typescript

🕹 애플리케이션 시작

React-Native 시작을 위해서는 React-Native 와 함께 제공되는 Metro 를 먼저 실행시켜야 한다.

프로젝트 위치에서 npx react-native start 를 통해 Metro 를 실행시킨후,

새로운 터미널을 열어, npx react-native run-android 를 실행시켜 Android 에뮬레이터를 구동합니다.

위와 같은 화면이 나오면 성공이다.

리액트를 사용하는 프로젝트에서 많은 폼 양식을 사용하게 되는데 이를 더욱 쉽게 관리할 수 있게 도와주는 라이브러리가 React-Hook-Form 이다.

🕹 설치 - yarn add react-hook-form

기존 사용 코드 예시를 보면,

export default function Page(){
      const [title,setTitle] = useState('')
       const [contents,setContents] = useState('')
    return(
        <>
              제목 : <input type="text" onChange={onChangeTitle} />
            내용 : <input type="text" onChange={onChangeContents} />
                  <button onClick={onClickButton}>등록</button>
          </>
    )
}

위와 같이 state 를 사용하여 input 의 값을 전달하고 관리하였다

이를 react-hook-form 을 사용하면,

import {useForm} from 'react-hook-form'
export default function Page(){
  const {register,handleSubmit} = useForm({
      mode:'onChange'
  })
    return(
        <>
          <form onSubmit={handleSubmit(onClickButton)}>
              제목 : <input type="text" register={...register('title')}/>
            내용 : <input type="text" register={...register('content')}/>
                  <button type='submit'>등록</button>
    </form>
          </>
    )
}

로 따로 state 를 사용하지 않고 등록이 가능하다 쉽게 생각해서 register 는 입력값을 담는 통, handleSubmit은 () 내를 실행시키는 기능 이라고 생각하면 이해가 조금 낫다

프로젝트의 규모가 커지면 커질 수록 여러 컴포넌트들에게 전해줘야하는 props는 과정이 상당히 번거로울 수 있다.

이를 context 를 사용하면 쉽게 값을 공유할 수 있다.

📌 context ?

context 는 컴포넌트 안에서 전역적(global) 데이터를 공유할 수 있도록 고안된 방안이다.

예를 들어 props 를 사용하여 값을 전달해 줄때는 index -> container -> presenter 와 같은 과정을 거쳐 단계별로 값을 전달해 주었지만 context는 중간 단계를 건너 뛰고 바로 값을 전달해 줄 수 있다.

📌 사용법

어떤 Presenter 에 isEdit 이라는 값을 넘겨주고 싶다하면,

최상위 요소에서 context를 만들어주고 context의 값을 넘겨줄 컴포넌트들을 감싸주어야 한다

import {createContext} from 'react'
export const Context createContext({}) // react의 createContext를 선언
const ContextValue = {
    isEdit : true
}
export default function Page(){
  return (
      <Context.Provider value={ContextValue}>
            <Container/>    // presenter 를 return 해주고있다
          </Context.Provider>
  )
}

이렇게 보내진 isEdit은 props 로 전달받지 않고 사용이 가능하다

import {useContext} from 'react'    // 받은 값을 사용하는 쪽에서 선언
import {Context} from '../../Page'
export default function presenter(){
    const {isEdit} = useContext(Context)
    return(
        <div>{isEdit ? '수정' : '등록'}</div>
    )
}

예시)

숫자가 담겨있는 arr 의 요소들을 div 안에 담아 배열의 숫자만큼 반복하여 출력하고 싶다면,

const arr ['이런','배열','1',3]
const manyDiv = arr.map(data => (<div>{data}</div>))
return (
        {manyDiv}
        )
// --화면출력--
// 이런
// 배열
// 1
// 3

특정 DOM을 가리킬 때 사용하는 함수

getElementById 와 같이, 함수형 컴포넌트의 어떤 부분을 선택 할 수 있게 해주는 방법

❗️여기서 DOM 이란 Document Object Model 의 약자

문서 객체 모델 이라는 것인데 html 문서의 태그들을 javaScript가 이용 할 수 있는 객체로 만든것이 문서 객체

import { useEffect, useRef } from 'react'
export default function Page(){
    const inputRef = useRef()
    useEffect(()=>{
        inputRef.current?.focus()
    },[])
  return (
      <input type="text" ref={inputRef}/>
  )
}

위와 같은 방식으로 useEffect와 혼용하여 렌더링 후 input 에 자동적으로 커서가 이동되어 있게 설정이 가능하다.

useEffect 함수는 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 기능

📌 기본형태

useEffect(function,[])
// function 자리에 수행하고자 하는 작업, [] 에 검사하고자 하는 특정 값이 들어간다

예시)

useEffect(()=>{
    console.log('마운트 !')
},[])

useEffect 를 사용하면 컴포넌트가 마운트 됐을 때(처음 나타났을 때), 언마운트 됐을 때(사라졌을 때), 업데이트 될 때(특정 props가 바뀔때) 특정 작업 처리가 가능하다.

❗️ 마운트 (처음 렌더링)

useEffect(()=>{
    console.log('마운트 될 떄만 실행')
},[])

컴포넌트가 화면에 처음 렌더링 될 때 한번만 실행되는 경우, 빈 배열을 넣는다.

❗️ 언마운트 (렌더링이 사라질 때)

useEffect(()=>{
    console.log('나타납니다')
      return () => {
        console.log('사라집니다')
    }
},[])

useEffect 에서 함수를 반환할 수 있는데, 이를 cleanup 함수라 부른다. [] 란이 비어있는 경우 컴포넌트가 사라질때 호출된다.

만약 특정값이 업데이트 되기 직전, cleanup 함수를 실행하고 싶다면 [] 란에 검사하고 싶은 값을 넣어주면 된다.

❗️ 업데이트 (특정 값이 변경될 때)

useEffect(()=>{
    console.log(age)
      console.log('age'가 업데이트 된다)
},[age])

특정값이 업데이트 될 때 실행하고 싶다면 [] 안에 검사하고 싶은 값을 넣어준다

이때, 업데이트 시에만 실행되는것이 아니라 마운트 시에도 실행된다. 업데이트 시에만 특정 함수 실행을 원한다면 조건을 붙여 사용하는것 또한 가능하다.

useEffect(()=>{
    if(isChange === true){
              alert('바뀌었습니다')
        }
},[isChange])

❗️ 특정값이 들어간 경우

[]에 특정 값을 넣게 되면 컴포넌트가 처음 마운트 될 때, 지정값이 변경될 때, 언마운트 될 때, 값이 바뀌기 직전에 모두 호출 된다.

• 타입 확인을 위해 사용

• 변수, 함수, 클래스에 사용

• 여러타입을 갖고 있는 요소로 이루어진 새로운 타입을 정의

interface Student ={
    name: String,
      age: number
}

위의 예제에서 Student 는 name 과 age 의 속성을 가지고 있는 interface 즉, 하나의 타입을 만들어 사용한다고 선언하는 것과 같다.

let Bob: Student = {
    name: 'Bob',
      age: 10
}

Bob 이라는 변수를 만드는데 이 변수의 타입은 위의 Student 인 것

📌 선택적 속성

interface 사용 시, 속성은 반드시 구현되어야 한다. 그러나, 속성 끝에 ? 를 붙여 주면 정의한 모든 속성을 전부 사용하지 않아도 된다.

interface Student ={
    name?: String,
      age: number
}

let Bob: Student = {
      age: 10
}

📌 함수 interface

함수의 타입 정의에도 사용이 가능하다

interface Sum{
    (a: number, b: number) : number
}

let sum: Sum

sum = function(a,b){
  return a+b
}

레이아웃은 프로젝트 전체의 UI 구조를 의미

Header, Navigation, Menu, Footer, Main 등으로 화면을 쪼개 하나의 컴포넌트에 조립시켜 보여주는 것

📌 구성

화면 구성을 위해 Header, Navigation, Banner, Body, Footer 로 나누어놓은 컴포넌트와

쪼개 놓은 컴포넌트를 하나로 조립하는 index 파일로 나누어져 있다.

쪼개놓은 컴포넌트를 import 시켜 사용하며, 기존과 동일하게 사용되는걸 확인할 수 있다.

❗️ index 파일 내부를 보면 props.children 이 있는데, 이 부분이 주소에 따라 다르게 들어가는 내부 내용이다.

만약 http://localhost:3000/boardDetail 로 접속을 한다면, {props.children} 자리에 boardDetail의 container 가 들어가는 것이다.

이 개념에 대해서 조금 더 이해하기 위해서는 작동 방식을 알아야 하는데, 어느 주소로 접속을 하던 가장 먼저 실행되는 파일이 _app.tsx 다

_app.tsx 의 구조를 보면, 위에서 만든 Layout 또한 import 되어 해당 프로젝트의 어느 주소를 실행 시키든 Layout 의 컴포넌트들이 모든 페이지에서 붙어 나오게 되는것이다.

Layout 내부에 Component, {...pageProps} 가 있는데 태그 내부의 자식들은 따로 명시하지 않아도 자동으로 children 이란 이름으로 props로 넘어간다.

_app.tsx 에서 Layout 으로 props 를 전달해주면, 최종적으로 바디영역 전체 Layout 이 children 이 되며 각각의 모든 페이지는 바디영역에 보여지게 된다.

filter는 배열에서 조건을 주고, 조건이 참인 요소들을 모아 새로운 배열로 반환

❗️ 하지만 중복값을 제거해주지는 않는다

const student = [
  {name: "뚱이", age: 5},
  {name: "스폰지밥",age: 4},
  {name: "다람이",age: 6},
  {name: "집게사장",age: 10}
]
const result = student.filter((con,idx,arr) => con.age>4 && idx>1)    
// 다람이, 집게사장

filter() ()안에는 순서대로 (요소, 인덱스, 배열) => (필터조건) 이 들어간다.

❗️()안 (요소, 인덱스, 배열)의 모든 요소는 필수가 아니고 찾으려는 조건에 따라 다르다.

위의 예시는 result에 age가 4보다 높고 indexNumber가 1보다 큰 배열의 값만 추출하여 넣어 준것.

📌 map()

map 은 함수를 사용해 배열내의 각각의 요소에 대해 한번씩 순서대로 호출해 그 함수의 반환값으로 새로운 배열로 반환

const student = [
  {name: "뚱이", age: 5},
  {name: "스폰지밥",age: 4},
  {name: "다람이",age: 6},
  {name: "집게사장",age: 10}
]
const resultName = student.map((con,idx,arr)=>`${con.name} 씨`)
// ["뚱이 씨", "스폰지밥 씨", "다람이 씨", "집게사장 씨"]
const resultAge = student.map((con,idx,arr)=>`${con.age}세`)
// ["5세", "4세", "6세", "10세"]

위의 예시에서는 이름 뒤에 "씨"를 붙여 이름만들 뽑아 resultName 에 넣어주었고 나이만 뽑아서 나이 뒤에 "세"를 붙여 resultAge 에 넣어주었다

📌 filter,map 혼용

filter 와 map 을 같이 쓰면 위의 예시에서 _다람이_와 _집게사장_에게만 "씨", "세"를 붙여주는것이 가능하다.

const student = [
  {name: "뚱이", age: 5},
  {name: "스폰지밥",age: 4},
  {name: "다람이",age: 6},
  {name: "집게사장",age: 10}
]
student.filter((con,idx,arr) => con.age>4 && idx>1).map((con,idx,arr)=>`${con.name} 씨`)
// ["다람이 씨", "집게사장 씨"]
student.filter((con,idx,arr) => con.age>4 && idx>1).map((con,idx,arr)=>`${con.age}세`)
// ["6세","10세"]

📌 spread

위에서 사용한 예제들은 특정 값만을 뽑아 새로운 배열로 만들어 주는것이였는데, spread를 사용하면 기존 배열형태를 유지하며 뽑아낼 수 있다

student.filter((con,idx,arr) => con.age>4 && idx>1).map(con => {
  return {
    ...con,
      name: con.name+' 씨'
    }
})

// [{name:"다람이 씨", age:6 }, {name:"집게사장 씨", age:10 }]

spread 란

spread 는 배열, 문자열, 객체 등 반복 가능한 객체를 개별 요소로 분리해준다

따라서 연결이나 복사 등의 용도로 사용하기 좋다

예시를 들자면,

let arr = [1,2,3,4,5]
let arr2 = [...arr,6,7,8,9,10]
// arr2에는 [1,2,3,4,5,6,7,8,9,10] 이 담기게 된다.

let str = "ABC D EFG"
let str2 = [...str]
// str2에는 ["A","B","C"," ","D"," ","E","F","G"] 가 담긴다.

아래 예시를 보면 배열병합이 더 편한것을 알 수 있다.

let arr = [1,2,3]
let arr2 = [4,5,6]
let arr3 = [...arr, ...arr2]
// [1,2,3,4,5,6]
let arr4 = [0,...arr,...arr2,7,8,9]
// [0,1,2,3,4,5,6,7,8,9]

배열을 복사 할 때에도 기존배열은 건들지 않고 새로운 배열을 만들 수 있다.

let arr = ["뚱이","징징이"]
let arr2 = [...arr]
arr2.push("다람이")
// arr2 = ["뚱이","징징이","다람이"]
// arr = ["뚱이","징징이"]

❗️ 하지만 sprea를 사용하여 배열을 복사 할 때 배열 내 객체를 복사하는것이 아니라 참조하는 것이기에(얕은 복사) 객체를 변경하는 경우 원본배열, 새로운배열 모두 값이 변하게 된다.

const arr = [{name:"스폰지밥",age:4}]
const arr2 = [...arr]
arr2[0].name="물고기"
console.log(arr)
//[{name:"물고기",age:4}]
console.log(arr2)
//[{name:"물고기",age:4}]

📌 객체의 경우

객체를 복사하거나 업데이트를 할 때도 요긴하다.

let a = {name:"퐁퐁",age:5}
a = {...a, school:"바다초"}
console.log(a)
// {name:"퐁퐁", age:5, school:"바다초"}

프레임워크는 소프트웨어의 구체적인 부분에 해당하는 설계와 구현을 재사용이 가능하게끔 일련의 협업화된 형태로 클래스들을 제공하는 것

이해하기 너무 어려운 말이고 쉽게 생각해서,

• 어떤 프로그램을 만들기 위한 기본 틀 / 뼈대

• 제공받는 일정한 요소, 틀, 규칙을 가지고 무언가를 만드는 것

❓장점

• 프레임워크 사용으로 프로그램을 편리하고 빠르게 만들 수 있음

• 체계적 제작으로 유지보수에 용이

❓단점

• 자유로운 개발에 한계가 있음

🐒 한줄요약

프레임워크 = 눈사람 모양과자 굽는데 쓰이는 눈사람모양 쿠키 틀

📌 라이브러리란?

라이브러리는 소프트웨어 개발 시 사용되는 프로그램의 구성요소로, 공통으로 사용될 수 있는 특정한 기능들을 모듈화한 것

역시나 무슨말인지 모르겠고, 프레임워크의 비유에 더해보면

❗️프레임워크는 무언가를 만들때 꼭 사용해야하는 요소, 지켜야하는 메뉴얼이라면

라이브러리는

• 프로그램을 개발하기 위해 쓰는 공구와 도구들

• 내가 편한대로 쓰는 알맞은 도구의 모음

(언제든 필요한 곳에서 호출하여 사용할 수 있도록 class / function으로 만들어져있음)

• 프레임워크에서 제공되는 요소와 규칙만들 지키면 그밖에 나머지는 어떤 라이브러리를 사용하여도 무관

❓장점

• 재사용 가능한 코드로 가독성과 유지보수 향상

• 프로그래밍 시간이 줄어들어 생산성 향상

🐒 한줄요약

라이브러리 = 눈사람 모양과자 굽는데 쓰이는 반죽(누군가 만들어놓은), 마트에서 사온 건포도

props 는 부모컴포넌트가 자식컴포넌트에게 넘겨준 데이터와 기능 등 을 의미

❓ react 를 사용하며 폴더 구조를 나눈 이후를 생각하면

Container (부모컴포넌트)

Presenter (자식컴포넌트)

위와 같이 컴포넌트를 나누면서 데이터와 기능의 연결이 끊어졌다

이때, 부모컴포넌트의 data = {data}와 onClickMoveToBoardDetail={onClickMoveToDetail} 처럼 props 로 연결이 가능하다

📌 props의 구조분해할당

props 를 받아오면 위의 presenter 에서 볼 수 있듯,

props.onClickMoveToDetail / props.deleteBoard 처럼 앞에 계속 props 를 붙여야한다. 이를 구조분해할당을 통해 사용 할 수 있다.

❗️ props.deleteBoard 를 예시로

export default function BoardListUI(props){
    <ColumnContentsDelete onClick={props.deleteBoard}>삭제하기</ColumnContentsDelete>
}

위의 코드를

export default function BoardListUI({deleteBoard}){
    <ColumnContentsDelete onClick={deleteBoard}>삭제하기</ColumnContentsDelete>
}

처럼 {} 중괄호를 통해 구조분해 할당을 하여 props 없이 사용 할 수 있다.

📌 emotion에 props 전달

emotion 태그에도 props 전달이 가능하다

import { useState } from 'react';
import { Test } from '../../src/test2';
export default function Test2() {
    const [isTrue, setIsTrue] = useState(false);
    const handleOnClick = () => {
        setIsTrue((prev) => !prev);    // useState로 설정된 기본값 false를 true로 바꿈
    };
    return (
        <>
            <Test isTrue={isTrue} onClick={handleOnClick}>색바꾸기</Test>
        </>
    );
}

>`isTrue` 의 값을 `emotion` 으로 넘겨준다 
>```js
import styled from '@emotion/styled';
export const Test = styled.div`
    color: ${(prev) => (props.isTrue ? 'red' : 'blue')};
`;

삼항연산자를 사용하여 isTrue 값에 따라 색을 지정해준다

구조 분해 할당은 쉽게 말해, 배열과 객체를 해체하여 안의 값을 사용 하는 것

다시말해 배열이나 객체의 구조를 분해하고 할당 하는 것

❓ 배열 구조 분해

배열을 만들었다.

let data = ["뚱이", "다람이", "징징이"]

구조 분해 할당을 통해 데이터를 다시 담는다.

[뚱, 다, 징] = data;
console.log(뚱) // "뚱이"
console.log(다) // "다람이"
console.log(징) // "징징이"

이런 경우도 가능함

const [a,b] = [1,2]
console.log(a) // 1
console.log(b) // 2

위 경우는 useState 에서 익숙히 본 모양

❓ 객체 구조 분해

객체를 만들었다.

let profile = {name: "뚱이", age: 11}

원래 사용했던 방식대로는 profile.name 과 profile.age 을 통해 필요한 값을 꺼내 왔다.

이 방식을 아래처럼 바꿔 사용하면 편하다

const {name, age} = profile
console.log(name) // "뚱이"
console.log(age) // 11

name 과 age 대신 다른 이름으로 사용도 가능하다

const {name:aaa, age:bbb} = profile
console.log(aaa) // "뚱이"
console.log(bbb) // 11

❓ 객체 구조 분해는 이미 사용하고 있었다.

query 로 데이터를 받아올 때

const {data} = useQuery()

❗️ useQuery 를 2번 써야하는 경우에는

const {data} = useQuery(fetch~~1)
const {data:DataTow} = useQuery(fetch~~2)

DataTow.fetch~~   로 
이름을 지정하여 받아올 수 있다.

기존의 && 연산자를 사용해 길어진 코드를 더욱 간결하게 사용하는 연산자

삼항연산자를 사용

data ? data.fetchProfile : undefined

여기서 data 는 동기적으로 받아오는 데이터인데, 데이터가 오기 전 return 부분에서 화면을 제공해주고 있기에 삼항 연산자를 사용하여 데이터가 있을 때, 없을 때 를 모두 적어주었다.

&& 연산자 사용

data && data.fetchProfile

&&연산자에서는 data 가 없을때, 자동으로 undefined를 반환

optional-chaning 사용

data?.fetchProfile

optional-chaning은 ? 연산자 앞 객체의 참조가 undefined 혹은 null 이면 undefined 를 return 해준다.

❗️ 내가 이해한 방식은 fetchProfile 관련 data 있어? 있으면 주고 없으면 undefined줘 로 이해했다

❗️ GraphQL 은 페이스북에서 만든 query 언어 web 이나 app을 구현할때 API 를 사용하여 기능을 구현하는데, 기능이 필요할 때 사용자가 필요한 데이터만을 골라 받아 사용 할 수 있게 해주는 것이 graphql

❓ query 언어란?

• query 는 데이터베이스(DB)에 정보를 요청하는 것

• 웹 서버에 정보를 보여달라는 요청에 의한 처리를 query 라고 함

  쉽게 말해, DB 에 접속해, 데이터를 입력, 조회, 수정, 삭제 하고 싶을때 DB 에 명령을 내리는 것이 query

🕹 설치방법

// 사용할 폴더에서 
`npm install @apollo/client graphql` 

🕹 초기세팅

❗️ 설치한 폴더의 _app.js 내부에 작성

📌 GraphQL의 구조

graphql 은 CRUD 를 query 와 mutation 으로 나누었는데,

• 데이터를 변조(Create, Update, Delete)하는 Mutation

• 데이터를 읽는(Read)하는 Query

두 가지로 나뉘어 있다.

📌 Apollo-Client

graphql은 query 언어이기에 자체적으로 할 수 있는 것이 없다.

이를 구체적으로 활용할 수 있도록 도와주는 라이브러리들이 있는데 나는 그 중 Apollo-client 를 사용한다

❓ Apollo ?

Apollo 는 gql 의 라이브러리 중 하나로, 상태 관리 플랫폼이다.

Apollo 를 통해 query 나 mutation 을 전송해 API 서버에서 데이터를 전해 받게 되면, 사용자는 네트워크단의 HTTP 요청을 번거롭게 신경 쓸 필요가 없어진다.

한마디로 정리하면 편하다

📌 GraphQL의 요소

• query 는 DB 로 부터 데이터를 얻어오기 위해 사용한다.
  
  query 에서 받아올 정보를 정하고
  
  변수에 담아 사용할 수 있다.

• mutation 은 서버,DB 의 데이터를 변경하기 위해 사용한다.

여기서 deleteBoard 가 받는 필수요소 boardId 의 이름을 aaa로 지정하여 연결하였다.

• 위의 fetchBoard 에서 가져온 정보들이 담겨있는 {data}는

이렇게 화면에 직접 호출해 사용할수도 있다.

📌 GraphQL 실사용

PlayGround의 입력 정보를 확인하며 사용하게 되는데,

const CREATE_BOARD = gql`            // CREATE_BOARD 라는 상수에 gql 을 담아준다
    mutation qqq($aaa:String, $bbb:String, $ccc:String, $ddd:String){                
                        // gql 의 mutation을 사용 할거고 얘이름은 qqq다,
                        // qqq가 받는 인자는 여러개가 있는데 그중  
                        // writer,password,title,contents를 쓸거고 얘네의 타입은 이거다.
        createBoard(            // mutation 중 createBoard 기능을 쓸건데,
            writer : $aaa,        // createBoard 안의 인자들은 이거 이거인데, 값을 넣어줄때 사용할 이름은 $aaa, $bbb, $ccc ... 이다
            password : $bbb,
            title : $ccc,
            contents : $ddd,
    ){
        message                // return값으로는 이걸 받겠다.
    }
}
`

❗️ gql상수 (CREATE_BOARD) 가 모두 대문자로 쓰이는 것은 관례라고 한다

위에서 만든 CREATE_BOARD (gql 상수)를 이용해 useMutation을 만든다

const [createBoard] = useMutation(CREATE_BOARD)
//(위 createBoard는 mutation을 실행하기 위한 이름, 아무거나 상관 없음) 

버튼을 눌렀을때 실행되는 함수에서 위의 mutation 코드 실행

function onClickPost(){
    createBoard({
        variables: {     // 위에서 지정한 writer,password ... 의 연결 이름들을 통해 작성
            aaa : "뚱이",
                  bbb : "123",
                  ccc : "안녕",
                  ddd : "난 뚱이야",
        }
    })
}

하지만 위의 방식으로 작성하면 항상 고정된 값만 데이터에 들어가기에 state 를 이용하여 실사용한다.

📌 async / await

gql 을 사용하면 요청에 대한 응답으로 받은 객체를 변수에 담아 사용하게 된다.

여기서 응답 결과를 변수에 담기 위해서는 통신이 완료될 때까지 기다려야하는데,

응답 결과를 받기도 전에 페이지 구성이 먼저 되어 응답결과가 화면에 출력되지 않는 경우가 생기기 때문.

그렇기에 통신이 완료될 때까지 기다리게 하는 명령이 async / await

async function onClickPost(){
    const result = await createBoard({
        variables : {
            aaa : "뚱이",
        bbb : "123",
              ccc : "안녕",
              ddd : "난 뚱이야"
        }
    })
}

📌 try / catch

Backend 컴퓨터의 문제나, 게시물의 갑작스러운 삭제 등 여러가지 실패 가능성이 생긴다.

그렇기에 실패에 대한 처리도 필요하다.

try{
    await createBoard({
        variables : {
            aaa : "뚱이",
        bbb : "123",
              ccc : "안녕",
              ddd : "난 뚱이야"
        }
    })
} catch(error){
  alert(error.message)    // Backend 개발자가 보내는 실패 메세지
}

try 내부의 내용이 실행이 끝까지 되지 않을 경우 catch 이후의 내용이 실행된다.

API 는 HTTP 요청 을 Backend 컴퓨터에 보냈을때 실행되는 Backend 기능

즉, Backend 개발자가 만든 함수

API 에 요청 시 보내는 데이터 = API 함수에 들어가는 인자

응답 시 받는 데이터 = API 함수의 return 데이터

📌 API 종류

🕹 rest-API

❗️ 특징

• API 의 이름이 홈페이지 주소 처럼 생김 ex) https://naver.com/board/1

• 응답 결과로 API 에서 보내주는 모든 데이터를 받아야만 한다

• rest-API 에 요청 담당 - axios

❗️ CRUD(Creat Update Delete Read)

• 생성 API : Post

• 수정 API : Put

• 삭제 API : Delete

• 조회 API : Get

❗️ 사용법

🕹 graphql-API

❗️ 특징

• API 의 이름이 일반적 함수처럼 생김 ex) proflie("철수")

• 응답 결과로 API 에서 보내주는 데이터 중 필요한 것만 골라 받을 수 있다

• graphql-API 에 요청 담당 - apollo-client

❗️ CRUD(Creat Update Delete Read)

조회 API 만 query를 사용한다

• 생성 API : Mutation

• 수정 API : Mutation

• 삭제 API : Mutation

• 조회 API : Query

❗️ 사용법

📌 API 명세서

API 명세서 = 사용 설명서

Backend 개발자가 만든 API에 대한 정보를 확인하기 위해서 필요하다

API 별 명세서

• rest-API => Swagger

• graphql-API => PlayGround

📌 API 요청 결과 타입 = JSON

{
    writer: "듀듕",
       title: "부부붕",
       contents: "내요옹",
}

API 의 요청 결과는 js 의 객체(object)처럼 표기되는데, 이 앞글자들을 따서 API 결과 타입을 JSON 이라고 부른다

yarn create next-app
// NextJs 설치 후 프로젝트 이름 입력 ex) Class

📌 Router 를 단순히 이해해 본다면

router 는 페이지 이동과 관련된 기능을 갖고있는 객체

useRouter 를 통해 기능을 불러오고,

router 객체 정의 이후 router 가 가진 객체 기능을 사용 할 수 있게 된다. 가장 많이 사용하는 기능으로는 push() 가 있다.

위 처럼 버튼 클릭을 통해 /detail/10 페이지로 이동하는 기능을 만들어 줄 수 있다. 이처럼 객체를 사용하여 A 페이지에서 B 페이지로 이동할 때 B페이지로 라우팅 한다고 표현한다.

📌 State 개념

지금까지 js 에서 데이터를 변수 에 담아왔다.

React 에서는

• state 는 컴포넌트 에서 데이터를 담기위한 변수 이다.

• setState 는 state 에 담긴 변수를 바꿔주는 기능을 갖고 있다.

• useState 는 컴포넌트에서 사용하는 변수를 만들어준다.

즉, const [변수명] = 변수만드는기능(담을내용) 이 되는데, 위의 예시에는 const [변수명, 변수를바꾸는기능] = 변수를만드는기능(담을내용) 이 되는 것이다.

📌 State의 사용 이유

js 의 let 은 let 의 값이 변경이 되었을 때 데이터 부분은 변경되지만 화면에는 반영되지 않는다는 단점이 있다.

하지만 state 를 사용할 경우, setState() 가 값을 변경해줌과 동시에, 변경된 데이터로 화면을 다시 그리는 명령이 실행되어 화면에 바로 반영 된다.

📌 많이 쓰이는 방식

지금까지 학습과정에서 state 는 회원가입이나 게시물/댓글 작성 등 서버 컴퓨터 에게 전송하기 위해 많이 사용되었다.

위 처럼 input 에 handleChangeId , handleChangePw 를 주어, 입력되는 값을 value 에 담은 후 setId setPw 에 넣어주어,

값이 입력됨과 동시에 그 값을 id pw 에게 줄 수 있다.

하지만 React 를 사용하기 시작한 후로 그 구조가 조금 달라졌다.

_❗️ 지금부터 예시로써 사용하는 폴더구조, 명칭(container presenter)은 사용자 마다 다르다. _

📌 폴더구성

React 설치 후 기본적 폴더 구조는 위와 같고,

pages 는 쉽게 생각해서 components 들을 불러와 화면에 보여주며,

~.container.tsx 는 기능적 요소들이,

~.presenter.tsx 는 index.html 과 같이 화면에 보여질 구조,

~.styles.ts 는 이름대로 css 처럼 꾸며주는 요소들이 들어간다.

❗️(확장자는 typescript를 사용하고 있어 .js가 아니다.)

요약하면 pages 내부의 파일이 src 안 components 속 board폴더의 파일들을 불러와 내보내준다.

📌 index.js

boards 폴더 안의 new 폴더 내부의 index.tsx 는 아래와 같이 구성 되어있다.

형태만 본다면 javaScript 에서의 function(){} 이 생각난다.

export 를 통해 외부로 내보내지고 default 가 붙어 BoardWritePage 만을 내보내는것으로 취급된다. return 값으로 BoardWrite 을 내보내는데 BoardWrite 컴포넌트의 내용을 화면으로 내보내준다.

📌 ~.presenter.js 와 ~.stlyes.js

~.presenter.js 와 ~.stlyes.js 는 HTML 과 CSS 로 생각하면 편하다.

import 를 통해 ~.stlyes.js 와 연결시켜주어 사용한다

📌 ~.container.js

~.container.js 는 기능적 요소들을 담아 ~.presenter.js 에게 전달한다.

여기서 주목해야 할 점은 ~.container.js 파일에서 ~.presenter.js 파일을 return 한다는 것이다.

❗️ 최종적으로 화면에 보여지는 index.js 는 ~.presenter.js 를 return 하는 ~.container.js 를 return 한다.

즉, index.js 의 return 값은 ~.container.js 다