React

💡 리액트에선 자바스크립트와 다르게 state를 활용 (항상 state를 조작)

리액트 사용 이유 : 자바스크립트를 쉽게 만들 수 있음 / html을 함수,array, object에 보관하고 재사용 가능(html관리 편함) / react native를 통해 같은 리액트 문법으로 모바일앱개발 가능(html css문법만 약간 다름)

개발환경 세팅

nodejs설치 → 작업폴더생성 후 터미널열어서 npx create-react-app 프로젝트명 →vscode에서 열기

scr폴더 안의 App.js에서 코드작성 → vscode터미널에서 npm start누르면 작성한 페이지 보여줌

컨트롤+c 누르면 종료

기존 html css처럼 코드를 짜지만 리액트에서는 html대신 JSX라는걸 사용

웹페이지 레이아웃은 html에서 짜던것처럼 div박스로 나눠서 사용

css스타일은 App.css파일에서 작성

📌 JSX 문법

• html에 class넣을땐 className사용

JSX는 일종의 자바스크립트라서 자바스크립트에서 사용하는 예약어인 class라는 키워드를 사용하면 안됨

• 데이터바인딩 - 변수를 html에 꽂아넣을때는 {변수명} 중괄호사용, 서버에서 받아올때도 동일

href / id / className / src 등 여라가지 html속성들에 넣어서 사용가능

⇒변수에 있던걸 html에 꽂아넣는 작업을 데이터바인딩 이라고 함

• html에 style속성을 바로 넣고싶을때

style={}안에 {}자료형으로 집어넣어야함 - {속성명 : ‘속성값’}

font-size처럼 대쉬기호 사용 불가 → 일종의 자바스크립트이기 때문에 빼기로 인식 , 붙여서 앞글자를 대문자로

function App() {

  let post = '맛집투어';

  return (
    <div className="App">
      <div className="black-nav">
				//이러면 클래스명이 맛집투어가 됨
        <h4 className={post} style={{color: 'yellow', fontSize: '16px'}}>BLOG</h4>
      </div>
      <h4>{post}</h4>
    </div>
  );
}

state 만드는 법

제일 위에 import {useState} from ‘react’ 하고

useState(’보관할자료’) : 자료 저장가능

let [a,b] = useState(’남자코트추천’); → a자리에 state이름을 작명하고 사용

자바스크립트 destructuring 문법

array안에 있는 데이터들을 변수로 쉽게 저장하고 싶을때 쓰는 문법

let [name, age] = ['Kim', 20] //name에는 Kim, age에는 20

⇒ 리액트에서는 useState()를 쓰면 [데이터1, 데이터2] 형태의 array가 남음

데이터1자리엔 ‘남자코트추천’같은 자료가 있고

데이터2자리엔 state변경을 도와주는 함수가 들어있음

📌 변수말고 state에 데이터를 저장해서 쓰는 이유

변수는 변동사항이 생기면 자동으로 재렌더링해주지 않지만

state는 변동사항이 생기면 자동으로 재렌더링해줌

⇒ 즉 자주변경될 것 같은 데이터들은 state에 저장해서 html에 데이터바인딩

좋아요 버튼 만들기

자주 바뀔 것 같은 html내용은 state로 저장했다가 데이터바인딩하면 되기 때문에 좋아요 개수를 state로 사용

onClick 사용법

1.Click가 대문자

2.{} 중괄호 사용

3.중괄호 안에는 그냥 코드가 아니라 함수를 넣어야 잘 작동함

onClick={ }안에는 만들어둔 함수명을 적거나 함수하나를 바로 만들어서 집어넣어야함 -> 코드가 길어지기때문에 함수명을 적는게 좋음

state변경하는 법

변수에 +1할려면 변수 += 1 하면 되지만 변수가 아닌 state이기 때문에 state변경함수를 써야함(state선언시 두번째 작명한 것-set)

function App() {
	let [good, setGood] = useState(0);

  return (
	      <div className='list'>
        <h4>{ title[0] } <span onClick={ () => { setGood(good+1) }}>좋아요👍</span> { good } </h4>
        <p>today : 2022.11.10</p>
      </div>

글제목 변경

function App(){
  
  let [title, setTitle] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] );  
  
  return (
    <button onClick={ ()=>{ 
//해당 코드는 확장성 부족 글제목[0] = '여자코트 추천'; 으로도 가능
      setTitle(['여자코트 추천', '강남 우동맛집', '파이썬 독학'])
    } }> 수정버튼 </button>
  )
}

setTitle(’여자코트추천’)으로 하면 기존 state를 괄호안의 내용으로 바꿔주기 때문에 안됨

📌 array, object 자료는 보통 기존값을 보존해주는식으로 코딩함

function App(){
  
  let [title, setTitle] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] );  
  
  return (
    <button onClick={ ()=>{ 
      let copy = [...글제목]; //state동작원리때문
      copy[0] = '여자코트 추천';
      setTitle(copy)
    } }> 수정버튼 </button>
  )
}

state 변경함수 동작원리

state변경함수는 변경하기 전에 기존state === 신규state를 먼저 검사하고

같으면 state변경을 해주지않음

array / object 동작원리

1. 자바스크립트는 array/object 자료를 하나 만들면 램이라는 가상공간에 저장이되고 선언된 변수에는 그 자료의 위치를 가리키는 화살표만 담겨있음

let data1 = [1,2,3];
let data2 = data1;   //복사문법

2. 위의 data1과 data2는 각각 [1,2,3]을 별개로 저장하는것이 아니라 같은값을 공유 / data1을 변경하면 data2도 자동으로 변경됨 ⇒ 저장된 위치를 가리키기때문, 포인터느낌?

let copy = 글제목;
copy[0] = '여자코트 추천';
글제목변경(copy)
//이렇게 하면 기존 글제목과 copy는 같은 곳을 가리키기때문에 state변경을 해주지않음

spread operator 점3개 문법 …

spread operator라고 하는 문법

array / object자료형 왼쪽에 붙일 수 있으며 괄호를 벗겨달라는 뜻

…[1,2,3] 은 1,2,3이 남음

let data1 = [1,2,3];
let data2 = [...data1];
console.log(data1 === data2) //false로 나옴

data1에 있던 자료들을 괄호 벗긴다음에 다시 array로 만들게되면 다른 위치를 가리킴 - 새로운 array로 인식 →독립적인 array복사본을 생성할 수 있음

리액트에서 array/object state를 수정하고 싶으면

독립적인 카피본을 만들어서 수정하는게 좋음

[...기존state]

{...기존state}

이렇게 하면 독립적인 카피가 하나 생성

html 코드 짤 때 유의점

return() 안에 두개의 html 태그를 나란히 적으면 안된다

retrun() 내부는 하나의 태그로 시작해서 하나의 태그로 끝나야함 - 전체를 하나의 div로 묶어주면 해결

return(
  <div>
    <div></div>
    <div></div>
  </div>
) //div를 나란히 적고싶을때 이렇게 함 ->fragment문법
//<> </>로도 가능

📌 복잡한 html을 한 단어로 치환할 수 있는 Component문법

주로 Component화 하는 부분

• 사이트에서 반복해서 나오는 html덩어리들
• 내용이 매우자주 변경될것 같은 html덩어리
• 다른 페이지를 만들고 싶을때 그 페이지의 html 전체
• 협업할 때 웹페이지를 Component단위로 나눠서 작업을 분배하기도함

function App (){
  return (
    <div>
      (생략)
      <Modal></Modal>
    </div>
  )
}

function Modal(){
  return (
    <div className="modal">
      <h4>제목</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

1. function을 이용해서 함수를 하나 만들고 작명
2. 그 함수 안 return()에 html을 작성
3. 원하는 곳에서 <함수명></함수명> 사용 == <함수명/>도 같음

축약한 html 덩어리를 Component라고 함

Component 만들 때 주의점

1. 작명시 첫문자를 영어대문자로 보통 작명
2. return()안에 html태그들이 병렬로 들어갈 수 없음
3. function App(){} 내부에서 만들면 안댐 - App()도 컴포넌트이기때문
4. arrow function써도 댐

📌 Component 단점

일단 HTML 깔끔하게 쓰려고 Component를 수백개 만들면 그것 만으로도 관리가 힘듭니다.

예를 들어서 function Modal 안에서 글제목 state를 쓰고싶어서 {글제목} 이렇게 쓰면 잘 안되는데

왜냐면 당연히 자바스크립트에선

한 function 안에 있는 변수를 다른 function에서 맘대로 쓸 수 없어서 그렇습니다.

props라는 문법을 이용해 state를 <Modal>까지 전해줘야 비로소 사용가능합니다.

리액트에서 동적인 UI 만드는 방법

1. html css로 미리 UI 디자인하기
2. UI의 현재 상태를 state로 저장 (스위치같은 느낌)
3. state에 따라서 UI가 어떻게 보일지 조건문 등으로 작성

JSX에서 조건문 쓰는 법

JSX안에서는 if else문법을 바로 사용할 수 없음

if문법대신 삼항연산자는 JSX중괄호 안에서 사용가능

조건식 ? 조건식 참일 때 코드 : 조건식 거짓일 때 코드

function App (){

  let [modal, setModal] = useState(false);
  return (
    <div>
      (생략)
//setModal(!modal) 하면누르면 보이고 한번 더 누르면 안보이게 됌
      <button onClick={ ()=>{ setModal(true) } }> {글제목[0]} </button>
      { 
         modal == true ? <Modal></Modal> : null
      }
    </div>
  )
}

📌 자바스크립트 map 함수 쓰는법

모든 array자료 우측에 map()함수를 붙일 수 있음

1. array에 들어있는 자료개수만큼 그 안에 있는 코드를 반복실행해줌
2. 콜백함수에 파라미터 아무거나 작명하면 그 파라미터는 array안에 있는 모든 자료를 하나씩 출력
3. return 오른쪽에 뭐 적으면 array로 넘겨줌

var arr = [2,3,4];
var newArray = arr.map(function(a){
  return a * 10
});
console.log(newArray) //[20, 30, 40]출력

JSX안에서 html을 반복생성 - map을 활용

function App (){
  return (
    <div>
      (생략)
      { 
        글제목.map(function(a){ //(a,i)로 하면 a에는 array의 자료 i는 0부터1씩증가하는 정수
          return (
          <div className="list" key={i}>
//map 반복문으로 반복생성한 html엔 key={i} 이런 속성을 추가해야함
            <h4>{ a }</h4>
            <p>2월 18일 발행</p>
          </div> )
        }) 
      }
    </div>
  )
}

map 반복문으로 반복생성한 html엔 key={i} 이런 속성을 추가해야함

map반복생성한 html에서 각각 좋아요 증가시키기

1. 그냥만들면 좋아요가 전체 증가함(좋아요를 기록한 state가 하나라서그럼)
2. 기록할 state를 여러개 만듬 →array자료를 활용해도댐
3. 좋아요는 state함수이기때문에 state변경함수를 사용해야하고, 거기다가 array자료형이니 array자료변경시 주의점도 신경써야함

⇒ array자료형일 경우 그냥 바꾸면 같은 위치를 가리키기때문에 변경되지않아서 복사하고 수정

<h4> 
  { 글제목[i] } 
   <span onClick={()=>{ 
      let copy = [...따봉]; //복사
      copy[i] = copy[i] + 1;
      따봉변경(copy)  //setGood(copy)
   }}>👍</span> {따봉[i]} 
</h4>

자식 컴포넌트에서 부모 컴포넌트의 state가 필요할때

자바스크립트에서는 다른 함수에 있는 변수를 마음대로 가져다 쓸 수 없음

단 부모-자식관계일때는 부모컴포넌트의 state를 자식컴포넌트로 전송가능
자식->부모 : 불가능

function App (){
  let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
  return (
    <div>
      <Modal></Modal>
    </div>
  )
}

function Modal(){
  return (
    <div className="modal">
      <h4>{ 글제목[0] }</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

props로 부모→자식 state 전송방법

1. 부모컴포넌트에서 사용하는 자식컴포넌트에 가서 <자식컴포넌트이름 사용할이름={state이름}/>
2. 자식컴포넌트를 만드는 function으로 가서 props라는 파라미터 등록 후 props.사용할이름 으로 사용

function App (){
  let [title, setTitle] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
  return (
    <div>
      <Modal setTitle={setTitle}></Modal>
    </div>
  )
}

function Modal(props){
  return (
    <div className="modal">
      <h4>{ props.setTitle[0] }</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

props는 무한히 전송가능 (여러개)

state외에 일반변수, 함수, 일반문자(일반문자는 중괄호없이 사용)전송가능

<Modal ss = {변수명} or {함수명} > <Modal ss = “강남우동맛집>

자식 →부모 불가능 / 옆의 컴포넌트로도 불가능 ⇒ 무조건 부모자식간에만 가능

props는 함수 파라미터 문법이랑 같음

function Modal(props){
  return (
    <div className="modal" style={{ background : props.color }}>
      <h4>{ props.글제목[0] }</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

이렇게 해놓으면 Modal사용하는 곳에서
<Modal color={’blue’}> <Modal color={’yellow’}>

이렇게 넘겨주는 값을 바꿔서 사용가능함(파라미터처럼)

<button onClick={() => { props.setTitle(['여자코트추천', '가나다', '공부하기'])}}>글수정</button>

이런식으로 함수자체를 넘겨받아서 사용가능

function App(){
	let [modalTitle,setModalTitle] = useState(0);{/**모달 창에서의 title의 인덱스를 위한 state */}
	h4를 누르면 setModalTitle(i)
}

function Modal(props) {
  return (
    <div className="modal" style={{background : props.color}}>
      <h4>{props.title[props.modalTitle]}</h4> {/*state를 props로 넘겨와서 사용 */}
      <p>날짜</p>
      <p>상세내용</p>
      {/*함수를 넘겨받아 사용 */}
      <button onClick={() => { props.setTitle(['여자코트추천', '가나다', '공부하기'])}}>글수정</button>
    </div>
  );
}

⇒ state를 자식 컴포넌트에 만들어도되지만 modalTitle이라는 state는 App에도 쓰고 Modal에도 쓰기때문에 다양한 컴포넌트에서 쓰이는 state는 부모컴포넌트에 만들어야 부모→자식 전송이 가능하기때문에 사용하기 쉬움

⇒ 즉 state는 state를 사용하는 컴포넌트 중 제일 상위에 있는 부모컴포넌트에 만들어야함

<input>에 입력 시 특정 코드를 실행하려면

onChange 아니면 onInput 이벤트핸들러를 부착하면 됨(유저가 입력할때마다 안에 있는 코드 실행)

이벤트핸들러는 종류가 많으니 필요할때마다 검색해서 사용

<input onChange={()=>{ 실행할코드 }}/>

<input>에 입력한 값 가져오는 법

<input onChange={(e)=>{ console.log(e.target.value) }}/>

e라는 파라미터를 추가하고 e.target.value

e.target 이러면 현재 이벤트가 발생한 곳을 알려주고

e.preventDefault() 이러면 이벤트 기본 동작을 막아주고

e.stopPropagation() 이러면 이벤트 버블링도 막아줍니다. 이거 쓰면 좋아요버튼 누를 때 모달창도 떠버리는 버그 해결가능

사용자가 input에 입력한 데이터 저장하기

사용자가 input에 입력한 데이터는 state아니면 변수에 저장해서 쓰는게 일반적

function App (){

  let [inputData, setInputData] = useState('');
  return (
    <input onChange={(e)=>{ 
      setInputData(e.target.value) 
      console.log(inputData)
    }} />
  )
}

참고사항

위의 코드 실행시 처음 한문자를 입력하면 콘솔창에 아무것도 안뜬상태로 출력됨

이유는 state변경함수의 특징때문

📌 state변경함수는 약간 늦게 처리됨 (비동기적 처리)

그리고 자바스크립트에서는 늦게 처리되는 코드들은 잠시 제쳐두고 바로 다음줄을 실행해줌

옛날 React 문법 - class문법으로 컴포넌트

class Modal2 extends React.Component {
  constructor(props){ //부모가 보낸 props
    super(props);
    this.state = { //state문법 - object문법과 동일
      name : 'kim',
      age : 20
    }
  }

  render(){
    return (
      <div>안녕 { this.props.프롭스이름 }</div> //부모가 보낸 props출력
			<button onClick={()=>{ this.setState({age : 21}) }}>버튼</button>    )
  } //state변경함수

}

react에서 부트스트랩 사용

구글에서 react bootstrap 검색하면 나오는 사이트에서 사이트미리보기 실행중이면 끄고 npm install적혀있는거 복붙 → 특정 스타일은 bootstrap css파일을 필요로하기때문에 복붙

대문자로 시작하는 것들은 컴포넌트이기 때문에 컴포넌트들은 전부 import 해줘야함

import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Navbar, Container, Nav} from 'react-bootstrap';

function App() {
  return (
    <div className="App">
      
      <Navbar bg="dark" variant="dark">
        <Container>
          <Navbar.Brand href="#home">Navbar</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#features">Features</Nav.Link>
            <Nav.Link href="#pricing">Pricing</Nav.Link>
          </Nav>
        </Container>
      </Navbar>
    </div>
  );
}

export default App;

이미지 넣는 법

css파일에서 src폴더안에 있는 사진을 사용하려면 /이미지경로 사용

background-image : url('./bg.png');

html안에서 src폴더의 이미지를 넣을려면 이미지를 import해오고 사용

1. import 작명 from './이미지경로' 한 다음에
2. 이미지경로가 필요한 곳에서 작명한걸 사용하면 됩니다.

<img>태그 쓰고싶으면 <img src={bg}/>이렇게 써도 보입니다.

귀찮으면 css파일을 활용합시다.

import bg from './bg.png'

function App(){
  return (
    <div>
      <div className="main-bg" style={{ backgroundImage : 'url(' + bg + ')' }}></div>
    </div>
  )
}

어딘가에 호스팅되어있는 외부 이미지는 절대경로 그대로 작성하면 잘보임

<img src="https://codingapple1.github.io/shop/shoes1.jpg" width="80%"></img>

📌화면을 가로로 3등분

실은 React-bootstrap 사이트에서 Row 아니면 Grid 라고 검색

public 폴더의 용도

여러가지 소스코드는 src폴더에 보관 / 이미지같은 static파일의 경우 public폴더에 보관해도됨

리액트로 개발을 완료하면 build작업을 하는데 지금까지 짰던 코드를 한 파일로 압축하는 작업

src폴더에 있던 코드와 파일은 다 압축이 되는데 public폴더에 있는 것들은 그대로 보존해줌

형태를 보존하고싶은 이미지,txt,json등 수정이 필요없는 static파일들의 경우엔 public폴더에 보관해도 상관없음

public폴더에 있는 이미지를 사용할때

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

그냥 /이미지경로 사용하면 됨 ⇒ public폴더에 있는 이미지 사용할때는 import를 안해도됨 , css파일에서도 /이미지경로 사용하면됨

권장되는 방식

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

리액트로 만든 html페이지를 배포할 때 codingapple.com경로에 배포하면 문제가 없지만

condingapple.com/어쩌구/ 경로에 배포하면

/logo192.png 이렇게 쓰면 파일을 찾을 수 없다고 나올 수도 있음

그래서 /어쩌구/ 를 뜻하는 process.env.PUBLIC_URL 이것도 더해주면 됨

codingapple.com/어쩌구/ 경로에 리액트로 만든 페이지를 배포할 일이 아예 없으면 굳이 안해도 됨

서버가 없어서 서버에서 데이터를 받지 못하니 js파일에 데이터를 저장해서 받아오는것처럼 만들기

export default / import 문법

예를들어 상품정보들을 state로 만들고싶은데 useState()안에 넣기엔 너무 길때

다른파일에 보관했다가 import해올 수 있음

(유의점)

• 변수, 함수, 자료형 전부 export 가능합니다.
• 파일마다 export default 라는 키워드는 하나만 사용가능합니다.
• 파일경로는 ./ 부터 시작해야합니다. 현재경로라는 뜻임
• export { } 했던 것들은 import { } 쓸 때 자유작명이 불가능합니다. export 했던 변수명 그대로 적어야함(여러개보낼때)

(data.js 파일)

let a = 10;
export default a; //export default 변수명; 원하는 변수를 내보냄

(App.js 파일)

import a from './data.js'; //가져올파일 import
console.log(a)

/////////////////여러개의 변수들을 내보낼때/////////////////
(data.js 파일)

var name1 = 'Kim';
var name2 = 'Park';
export { name1, name2 } //여러개 보낼때 사용

(App.js 파일)

import { name1, name2 } from './data.js';

<div className="container">
        <div className="row">
          {shoes.map(function(a, i){
            return(
              <Card shoes={shoes} i={i} key={i}></Card>
            )
          })}
        </div>
      </div> 
    </div>
  );
}

function Card(props){
  return(
    <div className="col-md-4">
//자바스크립트 입력을위해 {}를 붙이고 '문자'+ 변수 +'문자 형태로 문자중간에 변수넣기가능
      <img src={'https://codingapple1.github.io/shop/shoes'+ (props.i+1) +'.jpg'} width="80%"></img>
      <h4>{props.shoes[props.i].title}</h4>
      <p>{props.shoes[props.i].price}</p>
    </div>
)
}

페이지 나누기

일반 html css js사이트는 그냥 html파일 여러개를 만들어서 사용하지만

리액트는 하나의 html파일만 사용

⇒ 리액트에서 다른 페이지를 요청하면 그냥 내부에 있는 <div>를 갈아치워서 보여줌

react-router-dom이라는 외부 라이브러리를 설치해서 구현하는게 일반적

react-router-dom 설치방법

react-router-dom 홈페이지가서 따라하면 됨

해당 파일 터미널에서 npm install react-router-dom@6 입력(6버전)

세팅방법

index.js파일에서 <BrowserRouter> 이걸로 <App/>을 감싸면 끝 (import는 자동으로 됨 / 안되면 import해야)

라우터로 페이지 나누는 방법

1. 우선 상단에서 여러가지 컴포넌트를 import 해오고
2. 만들고 그 안에 를 작성합니다.
3. <Route path="/url경로" element={ <보여줄html> } /> 이렇게 작성하면 됩니다.

element안에 html작성할때 코드가 길면 컴포넌트로 만들거나 다른 파일에 작성 후 import하여 사용=>보통 이렇게 사용

import { Routes, Route, Link } from 'react-router-dom'

function App(){
  return (
    (생략)
    <Routes>
			<Route path="/" element={ <div>메인페이지에서 보여줄거</div> } />
      <Route path="/detail" element={ <div>상세페이지임</div> } />
      <Route path="/about" element={ <div>어바웃페이지임</div> } />
    </Routes>
  )
}

페이지이동 버튼

링크를 만들고 싶으면 react-router-dom에서 Link 컴포넌트 import 해오고

원하는 곳에서 쓰면 됩니다.

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

리액트 프로젝트 폴더구조

리액트는 그냥 html 이쁘게 만들어주는 쪼그만한 라이브러리일 뿐입니다.

그래서 여러분이 만들 파일들은 95% 확률로 .js 파일이기 때문에

비슷한 .js 파일끼리 한 폴더에 묶어놓으면 그냥 그게 좋은 폴더구조입니다.

컴포넌트 역할하는 js 파일은 components 폴더에 묶고

페이지 역할하는 js 파일은 routes 아니면 pages 폴더에 묶고

자주 쓰는 함수가 들어있는 js 파일은 utils 폴더에 묶고

useNavigate , Outlet

상단에 import

import { Routes, Route, Link, useNavigate, Outlet } from 'react-router-dom'

페이지 이동기능을 만들고 싶으면 useNavigate()사용
useNavigate vs Link
https://velog.io/@seokkitdo/React-Link-useNavigate
Link써도 가능

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

useNavigate() 쓰면 그 자리에 유용한 함수가 남음 - 페이지를 이동시켜주는 함수

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

404페이지

유저가 이상한경로로 접속했을 때 ‘없는페이지’ 임을 알려주고싶을때

<Route path="*" element={ <div>없는페이지임</div> } />

<Route path="*"> 하나 맨 밑에 만들어두면 됩니다.

*은 모든 경로를 뜻해서 만들어둔 경로가 아닌 다른 페이지로 접속시 *경로로 안내함

서브경로 만들 수 있는 Nested routes

<Route> 안에 <Route>를 넣는것을 Nested routes

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

function About(){
  return (
    <div>
      <h4>about페이지임</h4>
      <Outlet></Outlet>
    </div>
  )
}

/about/member ⇒ About페이지와 <Outlet> 자리에 <div>멤버들</div> 보여줌

/about/location ⇒ About페이지와 <Outlet> 자리에 <div>회사위치<div> 보여줌

import 해온 <Outlet>은 nested routes 안의 element들을 어디에 보여줄지 표기하는 곳

페이지 url을 바꿀때마다 각각 다른 ui를 보여주는데 이것도 동적이 ui만드는 방법 중 하나

장점 : 라우터를 쓰면 뒤로가기 버튼이 이용가능하다

자료의 순서 변경 시 상세페이지도 고장나는 문제 해결방법

상품순서를 가나다순으로 정렬하는 버튼을 누르면

shoes의 state안의 상품이 가나다순으로 정렬된다고 가정

버튼을 누르기 전엔 /detail/0하면 White and Black가 보여지는데 버튼을 누른 후엔 /detail/0하면 Grey Yordan이 보여짐

⇒ 상세페이지가 불규칙해짐

detailPage.js에서 데이터바인딩 시 입력한 값번째의 상품을 보여주는 걸로 코드를 짬

⇒ 해당 코드를 상품의 id가 입력한값인 상품을 보여주는걸로 코드를 변경

현재 url에 입력한 번호와 같은 번호를 가진 상품을 찾아서 데이터바인딩

.find() , .filter() 문법 사용

import { useParams } from 'react-router-dom';

function DetailPage(props){

  let {id} = useParams(); //typeof해보면 string으로 나옴
//arrow function에서 return과 중괄호는 동시에 생략가능
	//let findItem = props.shoes.find((x) => x.id == id ) 이렇게 써도 같음
  let findItem = props.shoes.find(function(x){ //find()콜백함수자리에 파라미터를 넣으면 array의 자료를 뜻
    return x.id == id //array자료.id == url에 입력한 번호
  })

  return (
    <div className="container">
      <div className="row">
        <div className="col-md-6">
          <img src={'https://codingapple1.github.io/shop/shoes'+ (findItem.id+1) + '.jpg'} width="100%" ></img>
        </div>
        <div className="col-md-6">
          <h4 className="pt-5">{findItem.title}</h4>
          <p>{findItem.content}</p>
          <p>{findItem.price}</p>
          <button className="btn btn-danger">주문하기</button>
        </div>
      </div>
    </div>
  );
}

export default DetailPage;

styled-component

설치 (npm install styled-components)

스타일을 바로 입혀서 컴포넌트를 만들 수 있는 라이브러리

import styled from 'styled-components'

장점1. CSS 파일 오픈할 필요없이 JS 파일에서 바로 스타일넣을 수 있음

장점2. 여기 적은 스타일이 다른 JS 파일로 오염되지 않습니다. 원래 그냥 CSS파일은 오염됩니다.

장점3. 페이지 로딩시간 단축됩니다.

왜냐면 저기 적은 스타일은 html 페이지의 <style>태그에 넣어줘서 그렇습니다.

일반 css파일 오염방지 방법

여러분이 App.css 파일을 만들어서 App.js에서 import해서 쓴다고 해도

거기 적은 클래스명들은 Detail.js까지 사용가능합니다. (오염됨)

프로젝트 사이즈가 작을 땐 편리하겠지만 사이즈가 커지면 관리하기 힘들어집니다.

그럴 땐 styled-components 써도 되지만 그냥 CSS파일에서도 다른 JS 파일에 간섭하지 않는 '모듈화' 기능을 제공하는데

컴포넌트명.module.css

이렇게 CSS 파일을 작명하면 됩니다. ex) App.module.css / detailPage.module.css

그리고 컴포넌트명.js 파일에서 import 해서 쓰면 그 스타일들은 컴포넌트명.js 파일에만 적용됩니다.

1. 기본적인 사용법

let Box = styled.div`
  padding : 20px;
  color : grey
`;
let YellowBtn = styled.button`
  background : yellow;
  color : black;
  padding : 10px;
`;

function Detail(){
  return (
    <div>
      <Box>
        <YellowBtn>버튼임</YellowBtn>
      </Box>
    </div>
  )
}

1. props로 재활용 가능하게

import styled from 'styled-components';

let YellowBtn = styled.button`
  background : ${ props => props.bg }; //bg 자리에 자유롭게 작명가능
	color : ${ props => props.bg == 'blue' ? 'white' : 'black' };
//bg가 blue면 글자색을 white로 아니면 black으로 삼항연산자 사용
  padding : 10px;
`;

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

단점1. JS 파일이 매우 복잡해짐

그리고 이 컴포넌트가 styled 인지 아니면 일반 컴포넌트인지 구분도 어려워짐

단점2. JS 파일 간 중복 디자인이 많이 필요하면 다른 파일에서 스타일 넣은 것들 import 해와서 사용

근데 그럼 CSS파일 쓰는거랑 차이가 없어짐

단점3. CSS 담당하는 디자이너가 있다면 협업시 불편할텐데 그 사람이 styled-components 문법을 모른다면

그 사람이 CSS로 짠걸 styled-components 문법으로 다시 바꾸거나 그런 작업이 필요해짐

환경에 따라 잘생각해보고 사용해야함

📌 컴포넌트의 Lifecycle

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

컴포넌트의 lifecycle 중간중간에 간섭(코드실행)이 가능 ⇒ 다양한 기능 기발이 가능

컴포넌트 Lifecycle에 간섭(코드실행)하는 방법

갈고리를 달아서 코드를 넣어주면 됨

hook(갈고리) 을 달아줌 ⇒ Lifecycle hook이라고 부름

요즘 React에서 Lifecycle hook 쓰는 방법

import {useState, useEffect} from 'react'; //useEffect import해야함

function Detail(){

  useEffect(()=>{
    //여기적은 코드는 컴포넌트 로드 & 업데이트 마다 실행됨
    console.log('안녕')
  });

  let [count, setCount] = useState(0)
  
  return (
    <button onClick={()=>{ setCount(count+1) }}>버튼</button>
  )
}

useEffect에 콜백함수를 추가해서 안에 코드를 적으면 해당 코드는 컴포넌트가 mount & update 시 실행됨

‘안녕’이 2번 출력

⇒ index.js에 <React.StrictMode>라는 태그가 있으면 2번 출력해줌

디버깅용으로 편하라고 2번 출력해주는데 싫으면 저 태그를 제거

useEffect밖에 적어도 똑같이 동작?

useEffect 밖에 적어도 똑같이 컴포넌트 mount & update 시 실행됨

-컴포넌트가 mount & update 시 function 안에 있는 코드도 다시 읽고 지나가기 때문

⇒useEffect 안에 적은 코드는 html 랜더링 이후에 동작함

예를 들어 시간이 오래걸리는 코드가 필요하다고 가정

function Detail(){

  (반복문 10억번 돌리는 코드)
  return (생략)
}

-여기에 html적으면 반복문돌리고 나서 html을 보여줌

function Detail(){

  useEffect(()=>{
    (반복문 10억번 돌리는 코드)
  });
  
  return (생략)
}

-useEffect안에 적으면 html 보여주고나서 반복문 실행

⇒useEffect를 사용하면 코드의 실행시점을 조절할 수 있음

함수를 useEffect라고 작명한 이유 - 함수의 핵심기능 외에 쓸데없는 기능들을 프로그래밍 용어로 side effect

컴포넌트의 핵심기능은 html 렌더링이라 side effect에서 이름을 따옴

html 렌더링 외의 쓸데없는 기능들은 useEffect안에 적기

오래걸리는 반복연산, 서버에서 데이터가져오는 작업 , 타이머다는것들을 useEffect 안에 많이 적음

📌 리액트에서 동적인 UI 만들기

1. UI 상태를 저장할 state 만들고
2. state에 따라서 UI가 어떻게 보일지 작성

function Detail(){

  let [alert, setAlert] = useState(true) //UI상태를 저장할 state
  useEffect(()=>{
    setTimeout(()=>{ setAlert(false) }, 2000) //2초 후 alert를 false
  }, []) //[]는 실행조건 - 아무것도 안들어가있기 때문에 mount시 1회만 실행

  return (
  {
//삼항연산자 사용
    alert == true
    ? <div className="alert alert-warning">
        2초이내 구매시 할인
      </div>
    : null
  }
  )
}

useEffect에 넣을 수 있는 실행조건

useEffect(()=>{ 실행할코드 }, [count]) //count가 변할때만 코드 실행
useEffect(()=>{ 실행할코드 }, [])

useEffect의 두번째 파라미터로 []를 넣을 수 있는데 여기에 변수나 state같은 것들을 넣을 수 있음(여러개 가능)

→ []안에 넣으면 []에 있는 변수나 state가 변할때만 useEffect안의 코드를 실행

[]안에 아무것도 안넣으면 컴포넌트 mount시(로드시) 1회만 실행하고 더이상 실행하지않음

clean up function

useEffect동작하기 전에 특정코드를 실행하고 싶으면 return ()⇒{}안에 넣으면 됨

return 안에 있는 코드를 먼저 실행

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

예를 들면 숙제로 했던 setTimeout 타이머인데

setTimeout() 쓸 때마다 브라우저 안에 타이머가 하나 생김

근데 useEffect 안에 썼기 때문에 컴포넌트가 mount 될 때 마다 실행

그럼 잘못 코드를 짜면 타이머가 100개 1000개 생길 수도 있음

나중에 그런 버그를 방지하고 싶으면useEffect에서 타이머 만들기 전에 기존 타이머를 싹 제거하라고 코드를 짜면 되는데

그런거 짤 때 return ()=>{} 안에 짜면 됨

useEffect(()=>{ 
  let a = setTimeout(()=>{ setAlert(false) }, 2000) //제거하기위해서 변수에 넣고
  return ()=>{
    clearTimeout(a) //타이머를 제거하는 함수
  }
}, [])

• clean up function에는 타이머제거, socket 연결요청제거, ajax요처 중단 등 이런 코드를 많이 작성
• 컴포넌트 unmount 시에도 clean up function 안에 있는게 1회 실행

📌 정리

useEffect( ()=>{ 실행할코드 } ) // 재랜더링마다 코드 실행가능
useEffect( ()=>{ 실행할코드 }, [] ) //컴포넌트 mount시 1회만 실행
useEffect( ()=>{ return ()=>{ 실행할코드 } } ) //useEffect안의 코드실행전에 항상 실행
useEffect( ()=>{ return ()=>{ 실행할코드 } }, [] ) //컴포넌트 unmount시 1회 실행
useEffect( ()=>{ 실행할코드 }, [state1] ) //state1이 변경될 때만 실행

input에 숫자말고 다른걸 입력하면 alert창띄우기

input에 입력한 값을 전부 문자형태로 출력 → ‘123’ ‘ㄱㄴㄷ’이렇게 숫자가 없는 문자인지 파악하고 싶으면 isNaN()사용

function Detail(){
  let [num, setNum] = useState('')

  useEffect(()=>{
    if (isNaN(num) == true){ //문자가 들어있으면 true가 나옴
      alert('그러지마세요')
    }
  }, [num])

  return (
    <input onChange((e)=>{ setNum(e.target.value) }) />
  )
}

서버 요청

1. 어떤 데이터인지 (URL 형식으로)
2. 어떤 방법으로 요청할지(GET or POST)

데이터를 가져올 때 (GET) / 데이터를 서버로 보낼 때 (POST)

GET / POST 요청하는 법

POST요청을 날리고 싶으면

<form action="요청할url" method="post">

→ GET, POST 요청을 저렇게 날리면 단점 : 브라우저가 새로고침됨

AJAX란?

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

AJAX로 GET/POST요청하는 방법 3개

1. XMLHttpRequest라는 옛날 문법 쓰기
2. fetch()라는 최신 문법 쓰기
3. axios같은 외부 라이브러리 쓰기 → 이게 가장 편함

⇒ npm install axios로 설치

AJAX 요청하는 방법

1. 상단에 axios를 import함
2. axios.get(URL) 이러면 해당 url로 get요청이 됨
3. 데이터 가져온 결과는 결과.data안에 들어있음
4. 인터넷이 안되거나 url이 이상하면 실패하는데 실패했을 때 실행할 코드는 .catch()안에 적으면 됨

import axios from 'axios'

function App(){
  return (
    <button onClick={()=>{
        axios.get('https://codingapple1.github.io/shop/data2.json')
        .then((result)=>{
          //console.log(result.data) 여기에서 결과가 들어있음
          let newShoes = shoes.concat(result.data)
					// let copy = [...shoes, ...result.data] 이렇게도 가능
          // console.log(copy)
          setShoes(newShoes)
        })
        .catch(()=>{
          console.log('실패')
        })
      }}>상품 더보기</button>
  )
}

POST 요청하는법

axios.post('URL', {name : 'kim'})
//url서버로 자료전송 / 완료시 특정코드를 실행하고 싶으면 .then()을 붙이면됨

동시에 AJAX요청 여러개 날리기

Promise.all( [axios.get('URL1'), axios.get('URL2')] )

url1 ,url2로 get요청을 동시에 해줌

둘다 완료 시 특정 코드를 실행하고 싶으면 .then()뒤에 붙이면 됨

📌 원래 서버와 문자자료만 주고받기 가능

array / object 주고받기 불가능 → 자료에 따옴표를 치면 가능

"{"name" : "kim"}"

이걸 JSON 이라고 합니다.

JSON은 문자 취급을 받기 때문에 서버와 자유롭게 주고받을 수 있습니다.

그래서 실제로 결과.data 출력해보면 따옴표쳐진 JSON이 나와야하는데

axios 라이브러리는 JSON -> object/array 변환작업을 자동으로 해줘서

출력해보면 object/array가 나옵니다.

fetch('URL').then(결과 => 결과.json()).then((결과) => { console.log(결과) } )

생자바스크립트 문법인 fetch()를 이용해서 get/post 요청이 가능한데

이건 JSON → object/array 로 자동으로 안바꿔주기 때문에 직접 바꾸는 작업이 필요

AJAX로 가져온 데이터를 html에 꽂을 때 에러나는 이유

1. ajax요청으로 데이터를 가져와서
2. state에 저장하라고 코드르 짜놓고
3. state를 html에 넣어서 보여달라고
   <div> {state.ㅇㅇ}</div>

이때 state가 비어있다고 에러가 나는 경우가 많음

이유는 ajax요청보다 html렌더링이 더 빨라서 그럴 수 있음

state안에 뭐가 들어있으면 보여달라고 if문 같은걸 추가하면 됨

tab만들기

function Detail(){
  let [탭, 탭변경] = useState(0)
  
  return (
		<Nav variant="tabs"  defaultActiveKey="link0">
	    <Nav.Item>
	      <Nav.Link onClick={()=>{ 탭변경(0) }} eventKey="link0">버튼0</Nav.Link>
	    </Nav.Item>
	    <Nav.Item>
	      <Nav.Link onClick={()=>{ 탭변경(1) }} eventKey="link1">버튼1</Nav.Link>
	    </Nav.Item>
	    <Nav.Item>
	      <Nav.Link onClick={()=>{ 탭변경(2) }} eventKey="link2">버튼2</Nav.Link>
	    </Nav.Item>
		</Nav>
    <TabContent 탭={탭}/>
  )
}

function TabContent(props){
  if (props.탭 === 0){
    return <div>내용0</div>
  }
  else if (props.탭 === 1){
    return <div>내용1</div>
  }
  else if (props.탭 === 2){
    return <div>내용2</div>
  }
}

다른방법

function TabContent(props){
  return [ <div>내용0</div>, <div>내용1</div>, <div>내용2</div> ][props.탭]
} //props.탭이 0이면 array자료에서 0번자료를 꺼내줌

props 쉽게 쓰는 방법

function TabContent({탭}){
  return [ <div>내용0</div>, <div>내용1</div>, <div>내용2</div> ][탭]
}

자식컴포넌트에서 props라고 파라미터를 하나만 작명하는게아니라

{state1이름, state2이름..} 이렇게 작성하면 props.state1이름 이렇게 안해도 됨

📌 애니메이션 만들기

1. 애니메이션 동작 전 스타일의 className 만들기
2. 애니메이션 동작 후 스타일의 className 만들기
3. transition 속성도 추가
4. 원할때 동작후의 classNam 탈부착

.start {
  opacity : 0
}
.end {
  opacity : 1;
  transition : opacity 0.5s;
}

useEffect를 사용해서 state아니면 props가 변할 때마다 코드실행

//이건 안보임 end를 뗐다가 붙여야함
function TabContent({탭}){

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

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

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

fade라는 state만들고 state에 따라 className이 어떻게 보일지 작성하고 원할때 fade변경

⇒ end라는 클래스명을 부착하는건 맞는데 떼었다가 붙여야 애니메이션이 보임

function TabContent({탭}){

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

  useEffect(()=>{
    setTImeout(()=>{ setFade('end') }, 100) //시간차를 둠
  return ()=>{
    setFade('') //clean up function 사용
  }
  }, [탭])

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

setTimeout 사용하는 이유

리액트 18버전이상부터는 automatic batch라는 기능이 생겼음

state변경함수들이 연달아서 여러개 처리되어야하면 state변경함수들 다 처리하고 마지막에 한번만 재렌더링됨

그래서 ‘end’로 변경하는거랑 ‘’이걸로 변경하는거랑 약간의 시간차를 둬야함

특정 컴포넌트 로드시 투명도가 0에서 1로 서서히 증가하는 애니메이션주는 방법

제일 큰 div박스에 클래스 탈부착

부모컴포넌트에서 자식컴포넌트의 자식컴포넌트에 state 전송

App → detailPage → TabContent 로 props를 2번 전송

이게 귀찮으면 Context API문법(거의 사용 x) or Redux같은 외부 라이브러리 사용

<TabContent tab = {tab} shoes = {props.shoes}></TabContent>

Context API문법으로 props없이 state 공유하기

Context API 문법을 쓰면 props전송없이도 사용가능

context는 쉽게 비유하자면 state보관함

(App.js)

export let Context1 = React.createContext();

function App(){
  let [재고, 재고변경] = useState([10,11,12]);

	return (
    <Context1.Provider value={ {재고, shoes} }>
      <Detail shoes={shoes}/>
    </Context1.Provider>
    
  )
}

만든 Context로 원하는 곳을 감싸고 공유를 원하는 state를 value안에 다 적으면 됨

감싼 모든 컴포넌트와 그 자식 컴포넌트는 state를 props전송없이 직접 사용가능

Context 안에 있던 state를 사용하려면

1. 만들어둔 Context를 import해좀
2. useContext()안에 넣음 - 해당 자리에 공유했던 모든 state가 남음

(Detail.js)

import {useState, useEffect, useContext} from 'react';
import {Context1} from './../App.js';

function Detail(){
  let {재고} = useContext(Context1) //Context를 해체해주는 함수

  return (
    <div>{재고}</div>
  )
}
//심지어 Detail 안에 있는 모든 자식컴포넌트도 useContext() 쓰면 자유롭게 재고 state를 사용가능합니다.

Context API단점(안쓰는 이유)

1. state변경시 쓸데없는 컴포넌트까지 전부 재렌더링이 됨
2. useContext()를 쓰고있는 컴포넌트는 나주에 다른 파일에서 재사용할 때 Context를 import하는게 귀찮아질 수 있음

⇒ 이거보다 Redux같은 외부라이브러리를 많이 사용함

장바구니 페이지 만들기(Redux 사용)

table레이아웃은 부트스트랩에서가져옴

Redux 사용시 이점

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

Redux를 설치해서 사용하면 js파일 하나에 state들을 보관할 수 있는데 그걸 모든 컴포넌트가 직접 꺼내쓸 수 있음

그래서 props전송이 필요없어짐 → 사이트가 커지면 쓸 수 밖에 없음

개발자 구인시에도 redux같은 라이브러리 숙련도를 대부분 요구함

Redux 설치

npm install @reduxjs/toolkit react-redux

redux toolkit이라는 라이브러리를 설치하는건데 redux의 개선버전(문법이 좀 더 쉬움)

설치 전 주의사항

• package.json파일에 “react”와 “react-dom”의 버전이 18.1.x이상이여야 사용가능

버전이 낮으면 18.1.0이렇게 수정한뒤 파일저장하고 터미널에서 install하면 됨

Redux세팅

1. store.js파일을 만들고 아래코드 복붙 (state들을 보관하는 파일)

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { }
})

2. index.js파일가서 Provider라는 컴포넌트와 store.js파일을 import

그리고 밑에 <Provider store={import한 파일}>이걸로<App/>을 감싸면 됨

⇒ <App>과 그 모든 자식컴포넌트들은 store.js에 있던 state를 마음대로 꺼내쓸수있음

import { Provider } from "react-redux";
import store from './store.js'
//import해오고
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store}> {/**<App>을 감싸기*/}
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
  </React.StrictMode>
);

Redux store에 state 보관하는 방법

1. createSlice()로 state만들기
2. configureStore() 안에 등록

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

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

//보내기
export default configureStore({
  reducer: {
    user : user.reducer
  }
})

1. createSlice( ) 상단에서 import 해온 다음에

{ name : 'state이름', initialState : 'state값' } 이거 넣으면 state 하나 생성가능

(createSlice( ) 는 useState( ) 와 용도가 비슷하다고 보면 됨)

2. state 등록은 configureStore( ) 안에 등록

{ 작명 : createSlice만든거.reducer } 이러면 등록 끝

여기 등록한 state는 모든 컴포넌트가 자유롭게 사용가능

Redux store에 있던 state 가져다 쓰는 방법

 (Cart.js)

import { useSelector } from "react-redux"

function Cart(){
  let a = useSelector((state) => { return state } )
//let a = useSelector((state) => state) return과 중괄호는 동시에 생략가능
//let a = useSelector((state) => state.user ) 이렇게 user데이터만 가져올수있음
  console.log(a)

  return (생략)
}

아무 컴포넌트에서 useSelector((state) => { return state } ) 쓰면 store에 있던 모든 state가 그 자리에 남음

store의 state변경하는 방법

state를 수정해주는 함수부터 store.js에 만들어두고 컴포넌트에서 원할 때 실행하는 방식으로 코드 작성

1. store.js안에 state수정해주는 함수부터 만듬

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

slice 안에 reducers : {}열고 안에 함수만듬

함수에 파라미터 하나 작명하면 그건 기존 state가 됨

return 우측에 새로운 state입력하면그걸로 기존 state를 갈아치워줌

1. 다른곳에서 쓰기좋게 export

export let { changeName } = user.actions

slice이름.actions 라고 적으면 state변경함수가 전부 해당 자리에 출력

그걸 변수에 저장했다가 export하라는 뜻

1. 원할 때 import해서 사용 / dispatch()로 감싸서 사용해야함

(Cart.js)

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

(생략) 
let dispatch = useDispatch()

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

store.js에서 원하는 state변경함수 가져오고

useDispatch를 import하고

dispatch(state변경함수()) 이렇게 감싸서 실행하면 state를 변경해줌

⇒ state수정해주는 함수를 불러서 수정하는 방식으로 하는 이유

컴포넌트에서 state를 직접 수정하게되면 당장은 편하지만 state가 잘못변경되는 버그가 발생하게디면

state를 수정한 컴포넌트를 모두 뒤져서 찾아야함

redux state가 array / object인 경우 변경하려면

{name : ‘kim, age : 20} 인 자료에서 kim → park 이렇게 변경하는 방법

return 오른쪽에 적은걸로 기존 state를 갈아치워줌

let user = createSlice({
  name : 'user',
  initialState : {name : 'kim', age : 20},
  reducers : {
    changeName(state){
	  state.name = 'park'
      return {name : 'park', age : 20} //보통 이렇게 사용 안함
    }
  }
})

state를 직접 수정하라고해도 변경 잘됨

state를 직접 수정하는 문법을 사용해도 잘 변경되는 이유는

Immer.js 라이브러리가 state 사본을 하나 더 생성해준 덕분인데 Redux 설치하면 딸려와서 그렇습니다.

그래서 결론은 array/object 자료의 경우 state변경은

state를 직접 수정해버려도 잘 되니까 직접 수정하십시오.

⇒ 보통 state를 만들 때 문자나 숫자 하나만 필요해도 redux에선 일부러 object아니면 array에 담는 경우가 있음 왜냐하면 수정이 편리해지기 때문

state 변경함수가 여러개 필요하면

파라미터문법을 사용가능

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

파라미터입력을 해서 함수사용이 가능

파라미터 자리에 넣은 자료들은 .payload하면 나옴

보통 파라미터를 action 으로 작명 많이함

action.type하면 state변경함수 이름 나옴

action.payload하면 파라미터 나옴

버튼 누르면 수량 +1되는 기능 만들기

버튼누르면 state를 수정해야하니 state를 +1해주는 수정함수부터 작성하고 export / import

let cart = createSlice({
  name : 'cart',
  initialState : [
    {id : 0, name : 'White and Black', count : 2},
    {id : 2, name : 'Grey Yordan', count : 1}
  ],
  reducers : {
    addCount(state, action){
      state[action.payload].count++
    }
  }
})

정확하게 동작하려면 버튼누르면 누른 상품id를 가져와서 가져온 상품 id와 같은 id를 가진 상품을 state에서 찾아서 그걸 +1하도록 코드작성

⇒ 이렇게 해야 상품순서 정렬 등 순서가 바뀌어도 잘 동작함

1. 버튼누르면 해당 상품의 id를 payload로 전송

dispatch(addCount(state.cart[i].id))

2. ‘payload와 같은 id를 가진 상품을 찾아서 +1 해달라고 코드작성 (모르면 구글검색)

findIndex()는 array뒤에 붙일 수 있음

안에 콜백함수넣고 return뒤에 조건식을 넣으면댐

파라미터a는 array안에 있던 하나하나의 자료

array에 있떤 자료를 다 꺼내서 조건식에 대입해보고 조건식이 참이면 그게 몇번째 자료인지 반환해줌

let cart = createSlice({
  name : 'cart',
  initialState : [
    {id : 0, name : 'White and Black', count : 2},
    {id : 2, name : 'Grey Yordan', count : 1}
  ],
  reducers : {
    addCount(state, action){
      let num = state.findIndex((a)=>{ 
				return a.id === action.payload })
      state[num].count++
    }
  }
})

주문버튼누르면 state에 새로운 상품추가

state변경함수만들고 export하고 import해서 사용

let cart = createSlice({
  name : 'cart',
  initialState : [
    {id : 0, name : 'White and Black', count : 2},
    {id : 2, name : 'Grey Yordan', count : 1}
  ],
  reducers : {
    addCount(state, action){
      state[action.payload].count++
    },
    addItem(state, action){
      state.push(action.payload)
    }
  }
})

(Detail.js)

<div className="col-md-6">
  <h4 className="pt-5">{findItem.title}</h4>
  <p>{findItem.content}</p>
  <p>{findItem.price}</p>
  <button className="btn btn-danger" onClick={()=>{
    //console.log(findItem.title)
    dispatch(addStock( {id : findItem.id, name : findItem.title, count : 2} ))}}>주문하기</button>
</div></div>

/cart입력해서 페이지를 이동하면 페이지가 새로고침되기때문에 state도 초기값으로 돌아감 → 라우터버튼을 만들어서 페이지 이동해야함

리액트에서 자주 쓰는 if문 작성패턴 5개

지금까지는 삼항연산자만 사용

• 컴포넌트 안에서 쓰는 if / else

function Component() {
  if ( true ) {
    return <p>참이면 보여줄 HTML</p>;
  } else {
    return null;
  }
}
// 아래처럼 사용하면 else생략이 가능함
function Component() {
  if ( true ) {
    return <p>참이면 보여줄 HTML</p>;
  } 
  return null;
}

자바스크립트 if문은 return() 안의 JSX 내에서는 사용 불가능

<div> if () {} </div> 는 안되기 때문에 보통 return + JSX 전체를 뱉어내는 if문을 작성해서 사용

자바스크립트 function안에선 return이라는 키워드를 만나면 return 밑에 있는 코드는 더이상 실행되지 않음

if -> else if -> else 이렇게 구성된 조건문도 if 두개로 축약가능합니다.

• JSX안에서 쓰는 삼항연산자

조건문 ? 참일때 실행할 코드 : 거짓일 때 실행할 코드

function Component() {
  return (
    <div>
      {
        1 === 1
        ? <p>참이면 보여줄 HTML</p>
        : null
      }
    </div>
  )
}

• &&연산자로 if 역할 대신

true && '안녕'; //안녕 출력
false && '안녕'; //false 출력
true && false && '안녕'; //false 출력

자바스크립트는 그냥 &&로 연결된 값들 중에 처음 등장하는 false값을 찾아주고 그게 아니면 마지막값을 남겨줌

//아래 두개는 동일한 역할
function Component() {
  return (
    <div>
      {
        1 === 1
        ? <p>참이면 보여줄 HTML</p>
        : null
      }
    </div>
  )
} 

function Component() {
  return (
    <div>
      { 1 === 1 && <p>참이면 보여줄 HTML</p> }
    </div>
  )
}

&&연산자로 조건식과 오른쪽 JSX자료를 비교

왼쪽 조건식이 true면 오른쪽 JSX가 그 자리에 남음

왼쪽 조건식이 false면 false가 남음 (false가 남으면 HTML로 렌더링하지 않음)

‘만약 변수가 참이면

를 이 자리에 출력하고 아니면 null’ 이런 상황에서 자주 사용

• switch / case 조건문

기본 문법인데 if문이 중첩해서 여러개 달려있는 경우 가끔 사용

function Component2(){
  var user = 'seller';
  switch (user){
    case 'seller' :
      return <h4>판매자 로그인</h4>
    case 'customer' :
      return <h4>구매자 로그인</h4>
    default : 
      return <h4>그냥 로그인</h4>
  }
}

1. switch (검사할변수){} 이거부터 작성하고

2. 그 안에 case 검사할변수가이거랑일치하냐 : 를 넣어줍니다.

3. 그래서 이게 일치하면 case : 밑에 있는 코드를 실행해줍니다.

4. default : 는 그냥 맨 마지막에 쓰는 else문과 동일합니다.

장점 : if문을 연달아 쓸 때 코드가 약간 줄어듬 / 단점 : 조건식란에서 변수 하나만 검사 가능

• object / array 자료형 응용

경우에 따라서 다른 html태그들을 보여주고 싶은 경우에 if문 여러개 혹은 삼항을 사용할 수 있지만 아래처럼도 작성 가능

현재 state가 info면 <p>상품정보</p>

현재 state가 shipping이면 <p>배송정보</p>

현재 state가 refund면 <p>환불약관</p>

function Component() {
  var 현재상태 = 'info';
  return (
    <div>
      {
        { 
           info : <p>상품정보</p>,
           shipping : <p>배송관련</p>,
           refund : <p>환불약관</p>
        }[현재상태]
      }

    </div>
  )
}

원래 JSX 상에서 html 태그들은 저렇게 object에 담든, array에 담든 아무 상관없습니다.

암튼 이렇게 object 자료형으로 HTML을 다 정리해서 담은 다음

마지막에 object{} 뒤에 [] 대괄호를 붙여서 "key값이 현재상태인 자료를 뽑겠습니다" 라고 써놓는겁니다.

var 탭UI = {  //보통 var변수대신 state로 사용함
  info : <p>상품정보</p>,
  shipping : <p>배송관련</p>,
  refund : <p>환불약관</p>
}

function Component() {
  var 현재상태 = 'info';
  return (
    <div>
      {
        탭UI[현재상태]
      }
    </div>
  )
}

localStorage 문법

js파일 아무데서나 localStorage문법을 쓰면 localStorage에 데이터입출력 가능

기존 데이터를 수정하는건 불가능하기때문에 꺼내서 수정하고 다시 저장

localStorage.setItem('데이터이름', '데이터'); //저장
localStorage.getItem('데이터이름'); //읽기
localStorage.removeItem('데이터이름') //삭제

localStorage에 array/object 자료를 저장하려면

그냥하면 자료가 깨지기 때문에 JSON으로 변환해서 저장

localStorage.setItem('obj', JSON.stringify({name:'kim'}) );
//변환해서 저장
var a = localStorage.getItem('obj'); //data가져옴
var b = JSON.parse(a) //JSON -> array/object

최근 본 상품 기능 만들기

1. detail 페이지에 접속하면
2. 현재 페이지의 상품id를 가져와서
3. localStorage에 있는 watch항목에 추가

(Detail.js)

useEffect(()=>{
  let 꺼낸거 = localStorage.getItem('watched')
  꺼낸거 = JSON.parse(꺼낸거)
  꺼낸거.push(찾은상품.id)
  localStorage.setItem('watched', JSON.stringify(꺼낸거))
}, [])

중복제거

상품id가 이미 [] 안에 존재하면 추가하지 않도록 if문 작성 하거나

Set자료형으로 array의 중복 제거

(Detail.js)

useEffect(()=>{
  let 꺼낸거 = localStorage.getItem('watched')
  꺼낸거 = JSON.parse(꺼낸거)
  꺼낸거.push(찾은상품.id)

  //Set으로 바꿨다가 다시 array로 만들기
  꺼낸거 = new Set(꺼낸거)
  꺼낸거 = Array.from(꺼낸거) //다시 array로
  localStorage.setItem('watched', JSON.stringify(꺼낸거))
}, [])

localStorage에 state를 자동저장되게 만들고 싶으면

redux-persist 이런 라이브러리 설치해서 쓰면 redux store 안에 있는 state를 자동으로 localStorage에 저장해줍니다.

state 변경될 때마다 그에 맞게 localStorage 업데이트도 알아서 해줌

하지만 셋팅문법 복잡하고 귀찮습니다.

그래서 요즘은 신규 사이트들은 Redux 대신 Jotai, Zustand 같은 라이브러리를 사용합니다.

같은 기능을 제공하는데 셋팅도 거의 필요없고 문법이 훨씬 더 쉬우니까요.

그리고 그런 라이브러리들도 아마 localStorage 자동저장기능들이 있습니다.

react-query 업데이트 사항

(업데이트 사항) 라이브러리 이름이 react-query에서 @tanstack/react-query로 바뀌어서 아래 정리한것들에서 변경해서 사용할것

npm install @tanstack/react-query //설치시 변경사항
//import시 변경사항
import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query'
//useQuery 쓸때 '작명' 말고 ['작명']으로 바뀜
useQuery(['작명'],

ajax요청하다보면 해당 기능들이 가끔 필요해짐

-몇초마다 자동으로 데이터를 다시 가져오게 하려면

-요청 실패시 몇초 간격으로 재시도

-다음 페이지 미리 가져오기

-ajax 성공/실패 시 각각 다른 html을 보여주려면

⇒직접 개발해도되지만 귀찮으면 react-query라는 라이브러리를 설치해서 사용해도됨

sns, 코인거래소 같은 실시간 데이터를 보여줘야하는 사이트들에서 사용하면 유용하고 나머지 사이트들은 딱히 쓸데는 없음

터미널에서 npm install react-query하고

index.js파일에서 1번 2번 3번 순서대로

import { QueryClient, QueryClientProvider } from "react-query"  //1번
const queryClient = new QueryClient()   //2번

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <QueryClientProvider client={queryClient}>  //3번
    <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
  </QueryClientProvider>
);

react-query로 ajax요청하는 방법

그냥 요청해도되지만 react-query를 써서 ajax요청을 날리면 더 편리한 기능을 제공 / useQuery()로 ajax요청을 감싸서 사용

function App(){
  let result = useQuery('작명', ()=>
    axios.get('https://codingapple1.github.io/userdata.json')
    .then((a)=>{ return a.data })
  )
}

react-query 장점

장점1. ajax 요청 성공/실패/로딩중 상태를 쉽게 파악할 수 있습니다.

function App(){
  let result = useQuery('작명', ()=>
    axios.get('https://codingapple1.github.io/userdata.json')
    .then((a)=>{ return a.data })
  )

  return (
    <div>
      { result.isLoading && '로딩중' }
      { result.error && '에러남' }
      { result.data && result.data.name }
    </div>
  )
}

result라는 변수에 ajax 현재 상태가 알아서 저장됩니다.

• ajax요청이 로딩중일 땐 result.isLoading 이 true
• ajax요청이 실패시엔 result.error 가 true
• ajax요청이 성공시엔 result.data 안에 데이터가 들어있음

그래서 ajax 로딩중일 땐 <A/> 보이기 / ajax 성공시엔 <B/> 보이기

이런거 직접 개발하려면 state 부터 만들어야 했을텐데 얘는 그럴 필요가 없습니다.

장점2. 틈만나면 알아서 ajax 재요청해줍니다.

페이지에서 일정시간 경과 / 다른창으로 갔다가 돌아오거나 이럴때 알아서 ajax요청을 다시해줌 / 재요청끄는법, 재요청 간격 조절하는 방법도 있음

장점3. 실패시 재시도 알아서 해줌

몇번 재시도하고 안되면 오류띄워줌

장점4. ajax로 가져온 결과는 state 공유 필요없음

지금 App 컴포넌트에서 유저이름 가져오는 ajax 요청을 날리고 있습니다.

근데 그 유저이름 결과가 Detail 컴포넌트에도 필요하면?

유저이름을 props 전송하면 되지만 props 전송 필요없음

Detail 컴포넌트에다가 유저이름 ajax 요청하는 코드 똑같이 또 적으면 됩니다.

react-query는 스마트하기 때문에 ajax 요청이 2개나 있으면 1개만 날려주고

캐싱기능이 있기 때문에 이미 같은 ajax 요청을 한 적이 있으면 그걸 우선 가져와서 씁니다.

react-query가 주장하는 장점은

server-state (DB 데이터)를 프론트엔드에서 실시간 동기화해주는걸 도와준다고 합니다.

근데 ajax 요청을 몇초마다 계속 날려서 가져오는 방식이라 좀 비효율적일 수도 있습니다.

실시간으로 서버에서 데이터를 자주 보내려면 웹소켓이나 Server-sent events 같은 가벼운 방식들도 있습니다.

그래서 react-query는 ajax 관련 기능개발 편하게 할 수 있는데에 의의가 더 있습니다.

RTK Query 라이브러리도 있음

Redux Toolkit 설치한 경우 RTK Query 라는것도 기본적으로 사용가능한데

비슷한 기능들을 제공합니다.

다만 셋팅하는 코드가 좀 더럽습니다.

RTK Query는 실은 다른 용도로도 많이 쓰는데

ajax 요청후 Redux state 변경을 하고 싶다면...

원래 Redux state변경함수 안에선 ajax요청하면 안되어서 컴포넌트 안에서 해야합니다.

근데 ajax 요청하는 코드가 다양하고 많으면 컴포넌트 안의 코드가 길어지고 관리도 귀찮은데

그런걸 Slice 안에서 관리가능하게 도와줍니다.

그리고 ajax 요청하는 코드가 100만개 있으면 그걸 편리하게 관리할 수 있게 도와줍니다.

근데 코드가 약간 더러울 뿐