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..
이번에 해볼 것은 input요소에서 사용자가 입력한/선택한 값을 제어해볼 건데요! let으로 선언한 변수는 JS내에서 변경은 가능하지만, 값이 변경되었다고 다시 렌더링 하지 않습니다. useState로 선언한 state를 setState함수를 통해 값을 변경하면 다시 렌더링하여 반영된 값을 화면에 출력해줍니다. useState()의 인수로 state의 초기값을 주며, 배열로 state와 setState함수를 받습니다. 1-1) text상태 관리하기 (input이 1개일 경우) import React, { useState } from "react"; const App = () => { const [text, setText] = useState(""); const onChange = (e) => { setT..
