⚛️ React

React : 에서 자주 쓰는 if문 패턴 5가지 (if, 삼항연산자, &&, switch, object)

1. 컴포넌트 안에서 쓰는 if/else 컴포넌트에서 JSX를 조건부로 보여주고 싶을 때 사용한다. if문은 return()안의 JSX내에서는 사용이 불가능하므로 보통 아래처럼 return+JSX를 뱉는 if문을 작성해 사용한다. function Component() { if ( true ) { return 참일시 노출될 HTML; } else { return null; } } else 생략하는 법 return을 만나면 코드가 종료되므로 이렇게 축약 가능하다. function Component() { if ( true ) { return 참일시 노출될 HTML; } return null; } 2. JSX 안에서 쓰는 삼항연산자(ternary operator) jsx 내(return 내)에서 쓸 수 있다...

React : 장바구니 제품 수량변경 (map, redux, action, payload)

조건 map으로 data를 불러온 장바구니 테이블에서 수량변경 버튼을 누르면, array에서 누른 버튼 옆에 있는 상품과 id값이 같은 상품을 찾아서 count값을 1 플러스 연산한다. 풀이 component.js { state.cart.map((a, i)=> { state.cart[i].id } { state.cart[i].name } { state.cart[i].count } { dispatch(changeCount(state.cart[i].id)) }}>➕ ) } store.js let cart = createSlice({ name : 'cart', initialState : [ {id : 0, name : 'White and Black', count : 2}, {id : 2, name : 'Gre..

React : state 공유하는 "Redux" (state 변경함수/파라미터/함수분리)

state 변경하는 법 useState()와는 다른 방식을 써야 한다. state를 수정해주는 함수를 만들고, 그 함수를 실행해야 할 때 store.js에 요청해야 한다. store.js에서 state 변경함수 만들기 let user = createSlice({ name : 'user', initialState : 'kim', reducers : { changeName(){ // state 값 변경함수 1 return 'Park' }, changeFullname(){ // state 값 변경함수 2 return 'Kim Noran' } } }) export let { changeName, changeFullname } = user.actions // 함수 export store.js에 변경함수를 만든다...

React : state 공유하는 "Redux" (state 보관/사용)

store에 state 보관하는 법 import { configureStore, createSlice } from '@reduxjs/toolkit' let 작명 = createSlice({ name : 'state 이름', initialState : 'state 값' }) let user = createSlice({ name : 'user', initialState : 'kim' }) let stock = createSlice({ name : 'stock', initialState : [10,11,12] }) export default configureStore({ reducer: { 작명 : createSlice만든거.reducer, user : user.reducer, stock : stock.red..

React : state 공유하는 "Redux" (설치)

컴포넌트간에 state 전송 없이도 Redux를 사용하면 state를 공유할 수 있다. js파일을 하나 만들어서 state를 몰아넣는 식이다. Redux 설치 전 확인사항 { ... "react": "^18.2.0", "react-dom": "^18.2.0", ... } package.json 파일에서 reat/react-dom 버전이 18.1버전 이상인지 확인하자. 설치하는 법 터미널 설치 npm install @reduxjs/toolkit react-redux store.js 파일생성 import { configureStore } from '@reduxjs/toolkit' export default configureStore({ reducer: { } }) src폴더에 store.js 파일을 생성해 ..

React : props 중첩되어있을 때 편한 "Context API" (사용법)

App 안에 있는 state를 App -> Detail -> Tab으로 2번 props 전송하려면 조금 귀찮다. 그리고 2번이 아니라 10번 중첩되면 난감해진다. 그럴 때 Context API를 쓰면 편하다. Context API 우선 단점부터 성능이슈(state 변경시 쓸데없는 컴포넌트까지 재렌더링됨)와 컴포넌트 재활용이 어려운 점 때문에 실무에서는 자주 쓰진 못한다고 한다. 그래서 이것보다 redux같은 외부 라이브러리를 더 많이 사용한다. 사용법 전송 보내는 컴포넌트 import { createContext, useState, useEffect } from "react"; export let Context1 = createContext() function App() { let [pracContext..