React

React

---

React에 대해서 공부한 내용을 정리하고 있습니다.

✅ let vs var

let키워드는 var키워드와 다르게 중복선언을 허용하지 않는다

✅ jsx

react에서는 js대신 jsx라는 것을 쓴다.
jsx는 return문 안에서 사용한다.
jsx안에서 js 표현식을 작성하려면 {}를 사용하면 된다.
이때 {}안에서는 if문과 for문을 사용할 수 없다. (

데이터 바인딩

중괄호를 사용하여 데이터 바인딩
href, id, className, src등 여러 html 속성들에도 가능

function App() {
  let data='red'
  return (
    <div className="App">
        <div>{red}</div>
    </div>
  );
}

style속성

<div style={ {color:'red', fontSize:'30px' } }>글씨</div>

• {속성명:'속성값'} 즉 객체 형태로 style을 줌
• 속성명에 '-'(대쉬)기호를 사용할 수 없다.
• 카멜 표기법으로 작성(font-size가 아닌 fontSize)

jsx에서는 if문을 쓸 수 없다.

삼항 연산자를 사용하거나,
외부에서 사용하거나,
and연산자(&&)를 사용하거나,
즉시실행함수(()=>{})를 사용

삼항 연산자는 연달아서 사용할 수 없다

{
  state == 0? <div>내용0</div> : null
  state == 1? <div>내용1</div> : null
}

위 코드와 같이 삼항 연산자는 연달아서 사용할 수 없다.

{
  state == 0? <div>내용0</div> : null
}
{
  state == 1? <div>내용1</div> : null
}

다음과 같이 중괄호를 새로 만들어줘야 한다!

for 반복문 대신 map() 을 사용

function App (){
  return (
    <div>
      { 
        ['song','min','cheol'].map(function(a,i){
          return ( <div key={i}>{a}</div> )
        }) 
      }
    </div>
  )
}

return문을 콜백함수에 넣어주면, arry로 반환하여 준다.
[<div>song</div>, <div>min</div>, <div>cheol</div>]이 반환되고, html로 띄우면 <div>song</div>, <div>min</div>, <div>cheol</div>이 3개 생성된다.

map 콜백함수의 매개변수 (a,i)

• a: array안의 content
• i: 반복문이 돌때마다 0부터 1씩 증가하는 정수

✅ state변경함수는 약간 늦게처리 된다

전문용어로 async하게 (비동기적으로) 처리된다.

✅ public 폴더

리액트로 개발을 끝내면 build 작업이라는걸 함( 지금까지 짰던 코드를 한 파일로 압축해주는 작업)
src 폴더에 있던 코드와 파일은 다 압축이 되는데 public 폴더에 있는 것들은 그대로 보존해준다.
따라서 이미지,txt,json등 static 파일의 경우 public 폴더에 보관해도 된다.

public폴더 이미지 사용

<img src="/logo192.png" /> 

import할 필요없이 그냥 /이미지경로 하면된다.

React에서 권장되는 방식

<img src={process.env.PUBLIC_URL + '/logo192.png'} /> 

배포할 때 mincheolsong.com/어쩌구/ 과 같은 경로에 배포하면 /logo192.png 파일을 찾을 수 없다고 나올수도 있다.
따라서 /어쩌구/를 뜻하는 process.env.PUBLIC_URL을 추가해주몬 된다.

✅ js변수를 img src에 넣는 방법

<img src={'https://codingapple1.github.io/shop/shoes' + (i + 1) + '.jpg'} width="80%" />

{}로 감싸줘야 한다.

✅ react-router-dom

페이지를 나눠주는 라이브러리
리액트에서는 다른 페이지를 요청하면 다른 html을 호출하는 것이 아닌, 하나의 html상에서 내부에 있는 <div>를 갈아치워 보여준다.

셋팅

index.js 에서 <App/>을 <BrowserRouter> </BrowserRouter> 로 감싸주면 된다.

import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
      <BrowserRouter>
        <App />
      </BrowserRouter>
  </React.StrictMode>
); 

<Routes />와 <Route>

import {Routes, Route} from 'react-router-dom'
function App(){

  return(
    (생략)
    <Routes>
      <Route path='/' elements={<div>페이지</div>}/>
      <Route path='/detail' elemtns={<div>상세페이지</div>}/>
    </Routes>
  )
}

<Routes> 태그로 <Route>태그들을 감싸준다.
<Route> 태그에선 접속경로인 path와, 접속하면 보여줄 페이지를 elements에 정의한다.

!404 페이지

<Route / >태그 제일 밑에 path='*' 인 <Route />를 추가하면 된다.

<Route path='*' elements={<div>404페이지</div>}>

설정하지 않은 path로 접속 시, 설정한 404페이지가 뜨게된다.

<Link /> vs useNavigate()

---

<Link />

<Route>에서 설정한 경로로 이동하는 링크를 만들어준다.

<Link to="/">홈</Link>
<Link to="/detail">상세페이지</Link>

useNavigate()

<Link /> 와 마찬가지로 페이지 이동기능을 제공한다

import {Routes, Route, Link, useNavigate} from 'react-router-dom'
function App(){
  let navigate = useNavigate()

  return (
    (생략)
    <button onClick={()=>{ navigate('/detail') }}>이동버튼</button>
  )
}

• navigate(-1) : 뒤로 1번 가기
• navigate(2) : 앞으로 2번 가기

---

서브경로 : nested routes

<Route>안에 <Route>를 넣을 수 있는데, 이걸 nested routes라고 한다.
이렇게하면 서브경로를 만들 수 있다.

<Route path="/about" element={ <About/> } >  
  <Route path="member" element={ <div>멤버들</div> } />
  <Route path="location" element={ <div>회사위치</div> } />
</Route>

그리고 <About /> 안에 하위 태그들을 어디 보여줄지 설정

import {Route, Routes, Outlet} from 'react-router-dom' 
function About(){
  return (
    <div>
      <h4>about페이지임</h4>
      <Outlet></Outlet>
    </div>
  )
}  

<Outlet> </Outlet> 을 사용해서 하위 <Route>들이 보여지는 위치를 지정해줘야 한다.

• /about/member로 접속시 <About> &<div>멤버들</div> 을 보여줌
• /about/location으로 접속시 <About> & <div>회사위치</div> 을 보여줌

useParams()

<Route path="/detail/:id" element={<Detail shoes={shoes}/>}/>

import {useParams} from 'react-router-dom'
function Detail(props) {
    let {id} = useParams();
    let detail_shoes=props.shoes.find((e)=>e.id==id);
}

path에서 설정한 /detail/:id 의 :id를, Detail컴포넌트에서 useParams을 사용하여 얻어올 수 있다.
그리고 js의 find를 사용하여 shoes객체의 id값과, /detail을 통해 넘겨준 :id값이 일치하는 객체를 찾을 수 있다.

arrow function에서 return과 {}는 동시에 생략가능

✅ styled-components

import styled from 'styled-components';

let YelloBtn = styled.div`
  padding : 10px;
  background : yellow;
  color : black;
`

styled-components는 css파일이 js파일들을 오염시키는 것을 방지할 수 있다는 장점이 있다.

일반 css도 컴포넌트명.module.css 와 같이 작명하여 오염방지가 가능하다.

props문법을 사용하여 재활용이 가능하다

import styled from 'styled-components';

let Btn = styled.div`
  background : ${ props => props.bg };
  color : ${ props => props.bg=='blue' ? 'white' : 'black'};
  padding : 10px;
`

function Detail(){
  return(
    <div>
      <Btn bg="orange">오렌지색 버튼</Btn>
      <Btn bg="blue">파란색 버튼</Btn>
    </div>
  )
}

<Btn> 에 props로 색상을 전달하여 만들어놓은 styled-components를 재활용 할 수 있다.
간단한 js 문법도 작성하여 배경이 파란색이면 글자를 흰색으로, 아니라면 글자를 검은색으로 바꿀 수도 있다.

✅ Lifecycle

컴포넌트는

1. 생성이 될 수도 있고(mount)
2. 재렌더링이 될 수도 있고(update)
3. 삭제가 될 수도 있다.(unmount)

이러한 Lifecycle에 useEffect를 사용하여 컴포넌트 장착시, 업데이트시, 제거시 코드를 실행할 수 있다. (=Lifecycle hook)

useEffect

• js는 위에서 부터 아래로 실행되는데 useEffect 안에 적은 코드는 랜더링이 다 되고나서 실행이 된다!
• for반복문을 useEffect 밖에 적어놓으면 밑에 return되는 html은 for 반복문이 다 실행되고 나서 랜더링 된다.
• 이러한 for반복문을 useEffect안에 넣어놓게 되면, 랜더링이 다끝나고 난 후 실행이된다. => 좀 더 효율적!
  html을 먼저 보여주고 어려운 작업을 하기 때문에!
• 따라서 시간이 오래걸리는 작업( 반복연산, 서버에서 데이터가져오는 작업, 타이머)같은 경우에는 useEffect안에 넣어주는 것이 좋은 관습이다!

clean up function

useEffect 동작하기 전에 특정코드를 실행하고 싶으면
return ()=>{}안에 넣으면 된다.

useEffect(()=>{
  그 다음에 실행됨
  return ()=>{
    여기있는게 먼저 실행됨 
  }
})

clean up function에는 타이머제거, socket 연결요청제거, ajax요청 중단 이런 코드를 많이 작성한다.
컴포넌트 unmount시에도 clean up function이 1회 실행된다.

---

useEffect(()=>{
  실행할 코드
})

컴포넌트 mount, update 마다 코드가 실행된다.

useEffect(()=>{
  실행할 코드
},[])

mount시에만 실행된다.

useEffect(()=>{

 return()=>{
  실행할 코드
 }
})

useEffect 안의 코드 실행 전에 항상 실행

useEffect(()=>{

  return ()=>{
    실행할 코드
  }
},[])

unmount시 1회 실행

useEffect(()=>{
  console.log('effect');
  console.log(name);
  return ()=>{
    console.log('cleanup');
    console.log(name);
  }
},[])

• 언마운트 될때만 cleanup 함수를 실행하고 싶으면 두 번째 파라미터로 빈 배열을 넣는다
• 특정값이 업데이트 되기 직전에 cleanup 함수를 실행하고 싶으면 두 번째 파라미터 배열에 검사하고 싶은 값을 넣어준다.

✅ AJAX

서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는 브라우저 기능을 AJAX라고 한다.

axios를 사용하여 AJAX로 GET/POST 요청을 할 수 있다.

<Button onClick={()=>{
  axios.get('https://codingapple1.github.io/shop/data2.json')
  .then((res)=>{
    if(shoes.length<6){ 
      let tmp=[...shoes,...res.data];
      setShoes(tmp);
    }
  })
  .catch(()=>{
    console.log('실패')
  })
}}>더보기</Button>

가져온 데이터는 res.data 안에 들어있다.

✅ automatic batch

리액트 18버전 이상부터는 automatic batch라는 기능이 생겼는데,
state 변경함수들이 연달아서 여러개 처리될때 state 변경함수를 다 처리하고 마지막에 한 번만 재렌더링이 되는 현상을 말한다.
이를 피하기 위해서 setTimeout함수를 사용하면 된다.

function TabContent({탭}){

  let [fade, setFade] = useState('')

  useEffect(()=>{
    setTImeout(()=>{ setFade('end') }, 100)
  return ()=>{
    setFade('')
  }
  }, [탭])

  return (
    <div className={'start ' + fade}>
      { [<div>내용0</div>, <div>내용1</div>, <div>내용2</div>][탭] }
    </div>
  )
}

✅ Redux

Redux는 props 없이 state를 공유할 수 있게 도와주는 라이브러리이다.

Redux 셋팅

1.store.js 파일 만들기

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { }
}) 

store.js 파일이 state를 보관하는 파일이 된다.

2.index.js 파일에 가서 설정하기

import { Provider } from "react-redux";
import store from './store.js'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
  </React.StrictMode>
); 

Provider와 store을 import한 후 <Provider store={import해온거}> 로 <App />을 감싸면 된다.

---

Redux store에 state 보관

1.createSlice({})
useState의 역할을 한다고 생각하면 된다. state 하나를 slice라고 부름!

import {configureStore, createSlice} from '@reduxjs/toolkit'

createSlice({
  name : 'state이름',
  initialState : '값'
})


export default configureStore({
  reducer: { }
}) 

2.createSlice로 만든 slice를 configureStore에 등록

import {configureStore, createSlice} from '@reduxjs/toolkit'

let user = createSlice({
  name : 'user',
  initialState : 'kim'
})


export default configureStore({
  reducer: { 
    작명 : user.reducer,
  }
}) 

createSlice로 만든 slice를 변수에 저장하고, configureSlice에 등록하면 된다.
이때 slice변수 뒤에 .reducer를 꼭 붙여줘야 한다.

---

Redux store에 저장한 state 가져다 쓰는 방법

useSelector를 사용하면 된다.

import { useSelector } from 'react-redux';

function Cart() {

    let user = useSelector((state)=>{return state.작명})
.
.
.
}

이제 user 변수에 저장된 값을 사용할 수 있다!!

컴포넌트간 공유가 필요없으면 그냥 useState() 사용해도 된다

Redux store의 state 변경하는 방법

1.store.js 안에 state를 수정해주는 함수를 만든다

let user=createSlice({
  name : 'user',
  initialState : 'kim',
  reducers : {
    changeName(state){
      return 'john' + state
    }
  }
})

slice안에 reducers :{} 를 만들고 거기안에 수정함수를 만들면 된다.

2.수정함수를 export한다.

export let {changeName} = user.actions

3. 수정함수 사용을 원하는 곳에서 import하여 사용한다

import {userDispatch, useSelector} from "react-redux"
import {changeName} from './../store.js'

let dispatch = useDispatch();
(생략)

<button onClick={()=>{
  dispatch(changeName())
}}>버튼</button>

1)state변경 함수를 import
2)useDispatch를 이용하여 dispatch 변수를 만듬
3)dispatch(state변경함수()) 이렇게 감싸서 실행

object/array형 state변경

array/object 자료의 경우 state 변경은 state를 직접 수정해버려도 잘 됨

let user=createSlice({
  name:'user',
  initialState : {name : 'kim', age : 20},
  reducers : {
    changeName(state){
      state.name='park'
    }
  }
})

state변경 함수의 파라미터

let user = createSlice({
  name:'user',
  initialState : {name : 'kim', age : 20}}),
  reducers : {
    increase(state,a){
      state.age += a.payload
    }
  }

increase(10) : +10 실행
increase(100) : +100 실행