React-01(기초)

React

현대적 프론트엔드 개발 방법

facebook, discord, twitter 등 SPA(single page application) 방식으로 개발됨.
전체 html구조가 아닌 특정 부분만 바뀌며 랜더링 되는 방식

M(model)V(view)C(controller)

모델 : 데이터
뷰 : 바뀐 데이터를 보여줌
컨트롤러 : 사용자 이벤트 처리

mvc 단점 : 양방향 데이터 바인딩으로 인해 model과 view의 의존성이 발생함.

복잡해질수록(데이터가 많아지고 상호작용하는 데이터도 많아지고 이에 따라 보여줘야할 view도 바뀌게됨.) 개발자 유지보수가 어려워진다.

해결하기 위해 facebook에서 리액트 개발
Virtual Dom을 통해 모든 HTML을 수정하지 않고 일부만 수정한다.
before html 과 after html의 차이를 react.js에서 계산해줌.

Component : 반복되는 코드를 컴포넌트로 묶어서 이용함.
State Manage : 컴포넌트 단위 데이터 관리 및 앱 전체 수준에서 공통 데이터를 상태로 관리
Virtual DOM : 부드럽고 빠른 페이지 전환과 연속적인 사용자 경험.

Babel & JSX

CreateElement 같은 가독성 떨어지는 코드는 안쓴다!
ES6로 작성된 코드를 > ES5등 다른 브라우저에서 읽기 가능하도록 변환

Webpack.js

모듈 번들러라고 불린다.
.js .hbs .cjs .sass .sass .png .jpg 등의 파일을 .js .css .jpg .png 로 변환

바벨, 웹팩 같은거 설정하다가 개발은 언제?

Create-react-app을 이용!

npx create-react-app my-app
cd my-app
npm start

실행을 통해 리액트가 webpack을 이용해 코드를 압축시켜준다.
yarn build

명령어를 통해 압축된 코드를 실행 가능하다.
npx serve -s build

바벨 등 환경설정을 create-react-app을 통해 기본설정을 이용하는 것이 아니라 내맘대로 하겠다는 명령어.(config 폴더, scripts 폴더가 생김.)
yarn eject

작성방법 기본

• HTML: 컴포넌트 생성 후 return 부분에 <h1>test</h1>등으로 html을 입력해 리턴시키면됨.
• JS: 리엑트 내에서 js 를 쓰려면 {} 후 안에 입력하면됨.
• CSS: CSS는 .css파일 작성 후 쓰고자하는 곳에서 import을 통해 불러와 이용
• SCSS: npm i node-sass 를 통해 .scss 문법 이용가능하다.
  ex) 버튼 하위 모든 span
  scss 문법

  button{
      color:green
      span{
          color:red
      }
  }

  css 문법

  button{
      color:green
  }
  button span{
      color:red
  }

  ex) 버튼 바로 아래 span
  scss 문법

  button{
      color:green
      & > span{
          color:red
      }
  }

  css 문법

  button{
      color:green
  }
  button > span{
      color:red
  }

  ex) 버튼 바로 아래 blue 라는 클래스
  scss 문법

  button{
      color:green
      &.blue{
          color:blue
      }
  }

  css 문법

  button{
      color:green
  }
  button.blue{
      color:blue
  }

• Styled-Components: 전역에서 사용되는 스타일 이외에 나만의 스타일 컴포넌트를 쓰고 싶을 경우에 사용
  npm i styled-components로 설치
  import styled form 'styled-components' 로 선언
  일반적으로 한 곳에 몰아 코드 아래, export 위에 적는다고함.

  export default function Button () {
      return <MyButton>Button</MyButton>
  }
  const MyButton = styled.button`
    color:green
  `

함수형 컴포넌트와 클래스형 컴포넌트

• 클래스형 컴포넌트는 옛날 스타일이고 요즘 코드는 함수형으로 많이 짠다.
• 클래스형 컴포넌트 내부의 constructor(){} , mount(){} ... 등은
  함수형 컴포넌트 내부의 hooks로 처리한다. ex) import React,{useState} from 'react'
• 크롬 확장프로그램인 react developer tools를 설치해 크롬 개발자 도구에서 쉽게 컴포넌트 상태 확인 가능

조건부 랜더링

text가 참일 경우 && 오른쪽이 실행됨.
{text === 'true' && <div>TRUE</div>}
삼항 연산자도 가능함.
{text === 'true' ? <div>TRUE</div> : <div>FALSE</div>}

input을 관리하는 방법

• 기본

  const [text, setText] = useState("")
  const onChange = (e)=>{
      const inputText = e.target.value
      setText(inputText)
  }
  
  return (
      <input onChange={onChange}></input>
  )

• useState 여러개(성, 이름 받을 경우)

  const [familyName, setFamilyName] = useState("")
  const [first, setName] = useState("")

  이용시

  {familyName} {first}

• 가장 좋은 방법(객체로 받는 방법)

  const [name, setName] = useState({
      family:'성',
      first:'이름',
  })

  이용시

  {name.family} {name.first}

  이용시(비구조화 할당 이용)

  const {family, first} = name
  {family} {first}

• useRef 이용 방법

  import {useState, useRef} from 'react'
  const [name, setName] = useState({
      family:'성',
      first:'이름',
  })
  const familyRef = userRef()
  const firstRef = userRef()
  const {family, first} = name
  cosnt confirm = () =>{
      setName({
          family: familyRef.current.value,
          first: first.current.value,
      })
  }

리스트 사용하기

배열을 통해 리스트 사용시 꼭 key를 설정해 나중에 해당 값에 접근하기 쉽게하자
{array.map(v => <li key={v.id}>{v.text}</id>)}

Effect Hook

Effect Hook을 사용하면 함수 컴포넌트에서 side effect를 수행할 수 있다.
즉, 컴포넌트가 다 올라간 이후에 작동하는 이벤트를 브라우저 API를 이용해 이벤트를 발생시킨다.
원래 컴포넌트 내부의 내용이 바뀌면 전체 컴포넌트가 다시 로드되는데, Effect Hook을 이용해 전체 컴포넌트가 아닌 컴포넌트의 useEffect 내용만 바뀐다. (무한 재귀함수가 되는 것을 방지)

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

function App(){
    const [second, setSecond] = useState(0)

    //마운트 된 후 실행(컴포넌트가 다 올라간 후 실행)
    useEffect(()=>{
        console.log('마운트')
        let interval = setInterval(()=>{
            setSecond(second + 1)
        },1000)

        //클린업, 언마운트
        return () => {
            console.log('언마운트')
            clearInterval(interval)
        }
    },[second])

    return(
        <p>{second}초</p>
    )
}

export default App

리액트 라우터로 페이지 구분하기 - 기본

1. yarn add react-router-dom 을 통해 설치
2. index.js에서
   • import { BrowserRouter } from 'react-router-dom' 추가
   • 기존 <App /> 코드를 <BrowserRouter><App /></BrowserRouter>로 감싸주기
3. App.js에서
   • import { Route } from 'react-router-dom' 추가
   • <a href="profile">프로필</a> 로 링크
   • <Route path="/profile" component={Profile} /> 로 해당 링크로 접근 되었을때 만든 컴포넌트 페이지로 보내주기
4. 보낼 페이지 작성 예시

   export default function Profile() {
   return <div>프로필페이지</div>
   }