내배캠 4기 React - TIL (64) 썸네일형 리스트형 221226 TIL 댓글 조회 axios get으로 json-server에 있는 데이터를 불러온다. const [commentList, setCommentList] = useState(null); const fetchList = async () => { const { data } = await axios.get("http://localhost:3001/comments"); setCommentList(data); }; 댓글 추가하고 새로고침 해야 렌더링이 됐었는데 get이랑 post가 적힌 컴포넌트가 다른데다가 post 적힌 컴포넌트에서 get 적힌 컴포넌트에 있는 setCommentList를 가지고 와서 추가해줘야하는데 자식에서 부모로 props를 줄 수 없어서 어떻게 해야하지 헤매다가 post 적힌 컴포넌트에 get도 다.. 221223 TIL 댓글 추가하기를 하는데 분명 로직은 다 맞는데 실행이 안되고 콘솔에도 undefined으로 떠서 헤매다가 다른 팀원분의 도움을 받고 해결하고 보니 내가 리듀서를 만들고 store에 넣어주질 않았다.... modules에 comments.js를 만들고 여기서 reducer를 만들었는데 reducer를 만들었으면 configStore.js -> rootReducer에 넣어줘야하는데 그걸 아예 잊고 있었다...ㅋㅋㅋㅋ 실컷 개념정리 다 해도 실전은 역시 쉽지 않아 .. reducer 만들고 store에 저장 !!!! 221222 TIL Redux vs ReduxToolkit 1. store 안에는 state와 이를 관리하는 action이 있다 - action : type, payload - 객체로 구성 { type: '', payload:'',} 2. provider : App.jsx에 store를 제공해주겠다. 3. 툴킷에서는 슬라이스에서 리듀서를 반환하고, 리덕스에서는 모듈에서 리듀서를 반환한다 4. 리덕스에서는 리듀서를 만들어서 직접 export, 툴킷에서는 슬라이스를 만들고 슬라이스에서 리듀서를 뽑아서 export함 5. slice는 reducer를 포함한 친구 CRUD & API GET - Read POST - Create PATCH - Update DELETE - Delete useSelector Redux store 관련 .. 221221 TIL Router.js에서 return문 안에는 3가지 컴포넌트가 들어간다. BrowserRouter로 Router를 감싸는 이유는, SPA 장점인 브라우저가 깜빡이지 않고 다른 페이지로 이동할 수 있게 해줌! const Router = () => { return ( // 리액트 프로젝트에서 라우터를 사용하겠다 라는 의미 // 고정시키고 싶은 컴포넌트 (공통 컴포넌트) // 페이지의 경로들을 묶어줌 ); }; path뒤에 입력한 값을 통해서 Route에 연결된 element 페이지에 접근할 수 있다. path에는 사용하고 싶은 '주소'를 넣어주고 element에는 해당 주소로 이동했을 때 보여주고자 하는 '컴포넌트'를 넣어줌! :id 같이 / 뒤에 입력된 파라미터는 페이지 안에서 어떤 변수로 동작할 수도 있다.. 221220 TIL Redux 설치 yarn add redux react-redux react-router-dom 설치 yarn add react-router-dom modules 폴더 : reducer를 return하는 많은 module들이 들어가고, 이 module들이 합해져서 store를 이루고 store를 이루는 module들 안에는 여러가지 state를 관리할 수 있는 설정들이 들어있음. 여기서 반환하는 reducer들을 호출해서 state 값을 변경 -> reducer를 호출할 때 dispatch 이용 221219 TIL useEffect : useEffect는 리액트 컴포넌트가 렌더링될 때 마다 특정 작업을 수행하도록 설정할 수 있는 Hook! 어떤 컴포넌트가 화면에 보여졌을 때 내가 무언가를 실행하고 싶다거나 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶을 때 사용한다. 즉 다시 말해, useEffect가 속한 컴포넌트가 화면에 렌더링 될 때 실행된다. 의존성 배열(dependency array) : 이 배열에 값을 넣으면 그 값이 바뀔 때만 useEffect를 실행할게! // useEffect의 두번째 인자가 의존성 배열이 들어가는 곳 useEffect(()=>{ // 실행하고 싶은 함수 }, [의존성배열]) 의존성 배열안에 어떠한 값도 넣지 않으면(빈 배열) useEffect가 처음 한번만 실행되고 그.. 221216 TIL 어제 못다 한 필기 정리를 마무리했다. 정리하면서 개념을 다시 한번 머리에 넣어뒀고 틈틈이 복습할 것! 221215 TIL React TodoList 만들면서 복습 내용 이전 1 2 3 4 5 6 7 8 다음
