React,Redux 정리

나 볼려고 하는 React 자꾸 까먹거나 햇깔려서 완벽하게 외어버리기 위한 정리

일단 React는 새로고침 없이 페이지가 바뀌는게 최고의 장점 인 것 같다 거기다 앱처럼 생겼기 때문에 웹앱만들기도 짱 좋음
사용해보면 뭔가 레고 조립하는거 마냥 컴포넌트 넣고 붙이고 하는데 여기에 필요한 문법들이 많음
하나씩 정리하고 외우자

결론부터 말하고 아래 정리
일단 React는 컴포넌트들 여러개를 알맞게 조립해서 만드는 느낌이다.
이 과정에서 라우팅으로 페이지를 넘기거나 하기도 하고, 코드 길어서 분리하려면 새페이지에 코드짜고 export default와 import로 나누기도 하고, 다른 컴포넌트에 맨위 스테이트를 넘겨주려고 props나 contextAPI나 redux를 쓰기도 한다.

state

중요한 데이터를 저장할 때 변수 쓰지말고 state로 저장하자
state는 React에서 새로고침없이 페이지를 재랜더링 해주기때문에 좋음
어레이부터 오브젝트나 뭐 별에별거 다 넣을 수 있음

let [스테이트,스테이트변경] = useState('스테이트짱')
이런식으로 상단에 작성 후 사용가능
(import {useState} from 'react';잊지말기)

일반 변수처럼 {}를 이용해 원하는 곳에 데이터 바인딩 가능/{}중괄호 안에는 변수, 함수 입력하면 됨

특이한게 안에 값을 변경할때
let 스테이트 = '1'이런식으로 변경하는게 아니라
스테이트변경('1') 이런식으로 변경해야한다.

근데 어레이형식인데 값 많으면 매번 하드코딩으로 다 바꿀수 없으니 추가하는 법
사본만들고 그거 변경하기
let arryCopy =[...스테이트]; <-카피본 만들기
arryCopy.unshift(입력값); <-카피본 앞에 넣어주세요
스테이트변경(arryCopy); <-카피본으로 수정
이렇게 하자

component

컴포넌트는 하나의 큰 박스 느낌 이걸 하나하나 위치에 맞게 붙여나가는게 React의 핵심인 듯
기본적으로 한 컴포넌트 구성은

function App(){
return(
<div>펑션app이 메인<div>
  )}

이렇게 function 이름(){return()} 구성으로 만들 수 있음, 즉 function 하나당 컴포넌트 하나임
컴포넌트 안에 컴포넌트를 만들 수도 있고, 따로 만들 수도 있고 자유

보기 쉽게 컴포넌트안에 길게 컴포넌트 만드는 것 보단 따로 만들고 집어 넣어주는게 좋아보임

function Newcoponent(){
return(
<div>메인말고 새 컴포넌트임<div>
  )}

이렇게 하나 아래에 만들고 위에 넣어주려면 위 컴포넌트에서 원하는 위치에

<Newcoponent></Newcoponent> <-요런식으로 대문자로 시작하게 해서 만들어서 붙여 넣어주면 됨

근데 어떤 것들을 따로 컴포넌트로 만들면 좋을까 고민 필요
뭐 주로
1.반복 출현하는 HTML덩어리들 map이나 반복문으로 component만들면 좋을 듯
2.내용 자주 바뀔거 같은거 따로 만들면 좋을 듯
3.다른 페이지 만들 때
4.협업 할 때 나눠하면 좋다고 한다

간단한 if문, 삼항연산자

이름 저거 맞던가 무튼 간단하게 쓰는 React if문

{
 조건
 ? 참일때 
 : 거짓일때
 }

끝

for,map반복문

map쓰자 어레이에 쓸 수 있긴한데, for 길기도 하고 map이 쉽고 좋앙,함수라서 {}여기에 바로 쓸 수 있어 개이득
이미 잘 아니 대충 정리

let 강아지 = ['포메','말티즈','푸들']
강이지.map( (안에강아지이름)=>{
return
<div>{안에강아지이름}</div>
} )

하면 포메 말티즈 푸들 div박스 세개 나옴
map안에 key={i} 값 넣어주기 참

for 쓸 꺼면 함수 만들어서 실행 시키는 방법으로 고

props

부모컴포넌트에 있는 스테이트를 자식컴포넌트에 보내는 문법 이거 중요

  function App(){
  let [스테이트,스테이트변경] = useState('스테이트짱')
  return(
  <div>펑션app이 메인<div>
    <Newcoponent></Newcoponent>
    )}
  function Newcoponent(){
  return(
  <div>메인말고 새 컴포넌트임<div>
    )};

이렇게 있을 때 저기 아래 자식컴포넌트에 div박스에 {스테이트} 쓰고 싶으면 props로 전송해줘야함
사용법은

1.우선 자식컴포넌트에 전송

<Newcoponent 스테이트={스테이트}></Newcoponent>

2.파라미터 입력 후 전송한거 받아오기

  function Newcoponent(props){
  return(
  <div>props.스테이트<div>
    )}

이렇게 쓰면 됨

input정리

input에 입력 된 값 받아오는 법
스테이트 하나 만들고 거기 넣어주기

let [인풋입력값,인풋입력값변경] = useState(''); <-초기값주고    
<input onChange={ (e)=>{인풋입력값변경(e.target.value)} }/>

e.target=현재 이벤트 동작하는 곳
value=값
원하는 곳에 {인풋입력값}으로 표현하자

import/export

import 받기
export default 내보내기, 파일마다 한 번 사용 가능,페이지 마지막에 쓰기
export {보내줄꺼, 보내줄꺼2}오 사용가능

예시 import {보내줄꺼} from './hello.js';
hello.js파일에선 export default 함수명/변수명(보내줄꺼) 입력
받아 쓸 때는 import 이름작명 from './파일주소';

Router

1.우선 설치부터 npm install react-router-dom@5
2.index.js에서 라우터 셋팅

  import {BrowserRouter} from 'react-router-dom';  임폴트해주고
  쓸 부분에 <BrowserRouter><App /></BrowserRouter>이렇게 감싸기

HashRouter도 있음(주소창에 #붙는거, 주소 분리되서 좀 더 안전)

App.js돌아가서 import {Link, Route, Switch} from 'react-router-dom'; 해주고
라우트만 쓸꺼면 라우트만 해두되지만 다 쓸 듯

  <Route exact path="/">
   원래 메인주소
   <Route>   
 <Route path="/원하는주소">
   안에들어갈꺼
   <Route>

하면 이제 원래 주소뒤에 /원하는주소 하면 저 안에들어갈꺼가 나옴
exact는 정확히 맞는 주소만 보여주는거 저거 없음 그냥 /만 있어도 전부 원래 메인주소 떠버림

Link

<Link to='경로'> 로 설정가능
  ex <Link to='/'>home</Link>

useHistory(); 훅 같은건데 이거 변수로 지정하고 방문기록 등을 담아 놓은 object
이거 변수 주고 let history = useHistory();
history.goBack();하면 뒤로가기 완성
history.push('/장바구니')하면 장바구니 바로가기 완성

Switch

위 Route는 원래 주소 뒤에 포함된건 모두 보여주는데 스위치 키고 끄는 것 처럼 하나씩 보이게 할꺼면 원하는 범위 전체를 <Switch></Switch>로 감싸기

주소창에 :id쓰시면 아무 문자나 받겠다는 URL작명법

useParams

let {id} = useParams();로 사용
즉 위에 :id를 이용해서 순서대로 파일에 자동 적용 가능, 근데 스테이트 자료가 바뀌면 같이 바껴버릴 수도 있으니 흠..id같이 파일에 고정값이 있는걸 고정하기

컴포넌트의 lifecycle

컴포넌트가 뭐 등장하고 업데이트되고 퇴장하고 이런 걸 나타내는건데 여기 중간중간에 hook을 걸 수 있음 (등장전에 훅 걸고 이것좀 해주셈, 퇴장전에 훅 걸고 이것좀! 느낌?)
쓸려면 useEffect(콜백함수); 사용 , 위에 import 까먹지 말기

ex 어느 컴포넌트 안에

  useEffect( ()=>{
  console.log(1)
  } );  

하면 그 컴포넌트 실행될 때 콘솔창에 1 찍어줌

컴포넌트 사라질 때 실행시키려면

useEffect( ()=>{
return function 이름(){할꺼}});

하면 사라질 때 실행됨

Ajax

GET,POST요청을 새로고침 없이 할 수 있게 해주는거
jquery ajax/axios/fetch()중 골라서 사용

axios쓸려면 우선 설치부터 npm install axios하고
axios.get('주소'); 하면 GET요청 새로고침 없이 가능

axios.get('주소')
.then( ()=>{요청 성공시 들어갈꺼} )
.catch( ()=>{요청 실패시 들어갈꺼} )  

로 사용

ContextAPI

props지옥 탈출 방법 중 하나
let 변수context = React.createContext();라고 메인 상단에 작성으로 범위 생성

<변수context.Provider value={쓸 스테이트}>
넣을 컴포넌트  
</변수context.Provider>  

그 후 범위 감싸기

넣으면 value에 넣은 값을 공유

그 후 가져다 쓸 컴포넌트에서 let변수context = useContext(변수context);로 가져오기, import 까먹지 말기

useEffect

재랜더링 막기, 대표적으로 API등에 사용
useEffect(함수, [])
위 []안에 함수 넣어서 그 함수 관련 일 때는 재랜더링 되게 이용 가능

Redux

Redux쓰는 큰 두가지 이유
1.props없이 모든 컴포넌트가 state 공유 가능
2.state 데이터 관리가능
npm install redux react-redux 로 설치 후
index.js에서

import {Provider} from 'react;
후 원하는 부분 <Provider></Provider>로 감싸기
후 상단에 let 변수 = createStore();로 스테이트 저장

creatStore가 import된 거 확인하기
let 변수 = createStore( ()=>{return [{name:용,age:1}]} );처럼 스테이트 만들기
그 후 Provider에 집어넣기 ex <Provider 변수={변수}></Provider>

다른 곳에서 사용할 땐

function 함수이름(state){
return{
	이름 : state[0].name or state:state 로 하면 스테이트를 스테이트로 다 바꾸는것도 ㄱㅊ
	}
}

export default connect(함수이름)(쓸려는곳 이름으로 작명) <-위에 import {connect} from 'react-redux'; 확인

위에 변수는 결국 index.js에서 데이터를 가져와 state를 props로 변환해주는 함수

이 후 사용할려면 props로 사용, props 아래에 아래에 아래 내려가기 힘들 때 이렇게 쓰면 개꿀

redux-reducer

일단 redux에선 state의 데이터 수정방법을 미리 정의 해야함
그걸 위해 reducer를 사용

let mainstate = [
{name:'용',age:1}
]

function reducer(state = mainstate, 작동){
	return state
    }

let store = createStore(reducer);

이렇게 스테이트 만든 후 수정하려면

let mainstate = [
{name:'용',age:1}
]

function reducer(state = mainstate, 작동){
if(작동.type === '수정'){

let copy = [...state] <-딥카피하고
copy[0].age++; <-카피한걸 수정하고
return copy <-수정한걸 보여주세요
    } else{
    return state
    }
}
let store = createStore(reducer);

결론은 reducer에는 state와 수정방법이 꼭 들어가줘야함
또 만들려면 변수하나 다시 만든 후 function reducer2로 작성
마지막 첨부할때는 createStore(combineReducers({reducer,reducer2}));로 첨부
이렇게 하면 수정 완료 이후 꺼내쓸려면 아래 dispatch로

redux-dispatch

위 reducer로 스테이트 만들어 놓고 그거 보내서 사용하려면
props.dispathc({type : '수정'}) 하면 수정방법이 동작
data: 혹은 payload: 로 데이터도 보낼 수 있음