.png)
나 볼려고 하는 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=[...arryCopy,'test']; <-카피본 앞에 넣어주세요
스테이트변경(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: 로 데이터도 보낼 수 있음
