state를 관리하게 될 때, useState를 사용하는 것 말고 useReducer를 사용할 수 있습니다. Reducer 함수는 state 데이터의 수정방법을 미리 정의하는 함수입니다. 기본 형식은 아래와 같습니다. const reducer = (state,action) => { switch (action.type){ case "a": return state+action.payload; default: return state; } } const [money,dispatch] = useReducer(reducer,0) dispatch({type:"a",payload:}) # payload ; 사용에 있어서 전송되는 데이터 # reducer ; state를 업데이트 하는 역할 / state ; reduce..
Redux ; JS 앱을 위한 예측 가능한 상태 컨테이너 - 일관적으로 동작하고, 서로 다른 환경(서버, 클라이언트, 네이티브)에서 작동하고, 테스트하기 쉬운 앱을 작성하도록 도움 - 시간여행형 디버거와 결합된 실시간 코드 수정과 같은 훌륭한 개발자 경험을 제공 React Redux 앱만들기 $ npx create-react-app my-app --template redux Redux 코어 라이브러리 다운로드 $ npm install redux Redux Toolkit 다운로드 $ npm install @reduxjs/toolkit action의 reducer ; action을 주면, 그 action이 적용되어 달라진 결과를 만들어 줌 function reducer(previousState,action)..
기존 컴포넌트 간에 데이터를 전달하려면 props를 이용해야 합니다. A>B>C 각각 부모자식관계일 때, A->C로 데이터를 props로 전달하려면 A>B, B>C로 전달해야하는 불편함이 있습니다. 이를 해결하게 위해 useContext를 사용할 수 있습니다. 조상 Component에서 내보낼 이름으로 createContext를 해줍니다. export const DiaryStateContext = React.createContext(); 로 전달할 요소들을 감싸면 됩니다. 전역 props로 value라는 변수명으로 data를 전달합니다. 아래는 실제 적용 코드입니다. export const DiaryStateContext = React.createContext(); export const DiaryDis..
React에서 라우터 사용 시 파라미터 정보를 가져와 활용하고 싶다면 useParams훅을 사용하면 됩니다. App.js입니다. Router의 경로에 diary/:id라고 되어있습니다. ex) 주소창에 diary/5라면 id = 5인 것입니다. Edit.js입니다. import { useParams } from "react-router-dom"; const { id } = useParams(); useParams를 import해줍니다. const {id}=useParmas로 id 변수에 파라미터를 넣어줍니다. 아래 링크는 라우터 관련 글입니다. https://peter-coding.tistory.com/202 [React] 라우팅(react-router-dom)(useParams, Query) 라우팅이란..
https://peter-coding.tistory.com/192 [React] 부모 Component -> 자식 Component에게 함수/리스 전달하기 이번에는 데이터를 추가해보겠습니다! App>DiaryList>DiaryItem 부모>자식>손자에게 onDelete함수를 전달하겠습니다. 우선, App에서 DiaryList로 onDelete함수를 props로 전달,전달해주겠습니다. const App = () =.. peter-coding.tistory.com 이 예제를 이어서 작성해보겠습니다. 부모 Component -> 자식 Component에게 props로 emotion_id,img,descript를 담은 리스트를 전달하였었습니다. 이번에는 부모 Component에서 state를 만들어 변경 함수를..
이번에 해볼 것은 저장된 이미지들을 한번에 나열해볼 건데요 ! 각 이미지들은 public>assets안에 저장되어 있습니다. 각 이름은 emotion1, emotion2...emotion5입니다. 6 : class명으로 모든 이미지에 공통 class로 emotion_img_wrapper 7 : 각 이미지별로 다른 class로 `emotion_img_wrapper_${emotion}`를 주었습니다. 8 : 두 class명을 [리스트] 안에 넣어 .join(" ")로 묶어 띄어쓰기 간격으로 합쳐주었습니다. 10 : process.env.PUBLIC_URL은 public의 절대주소이며, ``안에 ${ }보간법을 사용하여 각 이미지별 이미지명을 나타냈습니다. const DiaryItem = ({ id, emot..
이번에는 useNavigate를 이용하여 사이트 이동버튼을 만들어볼건데요 ! 일단 useNavigate를 react-router-dom으로부터 import해줍니다. import { useNavigate } from "react-router-dom"; useNavigate()의 변수 navigate를 만들어줍니다. 6~10 : MyButton의 props로 type, text, onClick을 전달해줍니다. 이 때 props를 전달하는 것이기에 {중괄호}로 감싸야 합니다. 9 : onClick의 함수로 navigate()를 전달하는 것입니다. 현재 주소에서 /new를 붙힌 주소로 이동시킬 것이기 때문에 navigate("/new")라 작성해줍니다. const DiaryList = ({ diaryList }..
오늘은 select, option 요소를 이용하여 React에서 최신순 / 오래된 순으로 정렬을 해볼 건데요 ! 현재 Component의 return 부분입니다. 3~7 : ControlMenu 컴포넌트에 props로 value,onChange,optionList를 넘겨주었습니다. value의 sortyType은 state, onChange는 state변경함수, optionList는 Component밖에 만든 value와 name을 가진 배열입니다. 8~13 : getProcessedDiaryList()에서 하나씩 꺼내(map((it)=>()), key={it.id}로 props를 전달하고 it.content와 it.emotion을 나열하였습니다. // Component 밖 const sortOption..
