Coding/REACT9 Next.js 13부터의 App Router 기능 및 기존 Page Router와의 차이 안녕하신가? 거의 1년만에 돌아온 프론트엔트 개발자 하상원이다. 그 동안 블로그를 작성하지 않았는데, 이제 공부를 재개하기 때문에 아마 종종 작성될 것이라고 생각한다! 이전 회사에서 고통스러운 시간과 함께, 개발이 약간 싫어질 뻔 했다만.. 아쉽게도 코드는 죄가 없다. 응 회사를 바꾸면 그만이야~ 지금은 극복하고 진화한 메탈 하상원몬 상태라고 할 수 있다. 하여튼 지금 비트코인 사이트 클론 코딩을 해보고 있다. 그 이유로는 아래의 문답 때문이다. 친구 : 코인 사이트 만드는거 어렵겠지? 나 : ㅇㅇ 친구 : 왜? 나 : 음... 아마 어렵지 않을까? 아마 어려울텐데, 왜 어려운지 모르겠다. 그래서 만들어보기로 한다!! 나는 간단하게 개인 프로젝트로 만들더라도 react보다 next.js를 선호하는 편인데.. 2024. 4. 1. [React + Next.js] Redux toolkit 사용하기 난 Redux를 처음 쓴다. 근데 시작부터 건방지게 Redux toolkit 을 사용하겠다. 그래도 되냐 한다면 당연히 오케이다. 왜냐하면 toolkit이 더 편해보이기 때문이다. Redux 란 리덕스란 상태 관리 라이브러리이다. Context API를 써봐서 대충 어떤 건진 알겠는데, 아 ContextAPI랑 차이점 같은 것도 나중에 공부해야겠다. 구조 1. Store에 데이터를 저장한다. ( initial data ) 2. Store에 있는 데이터를 읽어서 UI에 보여준다. 3. UI 이벤트에서 dispatch가 이뤄진다. 4. dispatch는 action을 전달한다. 5. reducer는 action을 받아서 store에 저장한다 ! 순서로 흘러간다. ( 내 경험 상 그런듯함 ) Redux의 규칙.. 2022. 9. 26. [React] setState를 해도 렌더링이 안되는 이유 안녕하신가 ? 오늘(일요일)은 회사 앱에 추가될 기능을 연습하기 위해 Google Form을 클론 코딩하고 있었다. 위 프로그램을 코딩하면서, 질문을 여러 개 만들었다가 삭제하는 기능을 만들었다. 딜리트. 말 그대로 추가한 걸 삭제하는 기능인데, 실행되는 index를 받아서 해당 배열에서 그 Index를 지우는 거다. 문제 없이 생긴 기능. 허나 전혀 작동하지 않는다. 정확하게 말하면 setState로 인해 state 값이 변경되었는데도, 화면이 리렌더링 되지 않는다. 뭐야 !? 그래서 일단 다른 스테이트를 선언해서 setSurveyList 밑에 setCount(count+1) 막 이렇게 선언해봤다. 그러면 렌더링 된다. shit, 대체 뭐지하고 구글링 해보니 내 멍청함을 알게 되었다. setState를.. 2022. 9. 26. [React] Context API + useReducer 로 전역 상태 관리 하기 useReducer 여러 state를 초기 값으로 가질 수 있고, setState 대신 state를 바꾸는 함수와, state의 초기 값이 들어간다. import React, { useReducer } from 'react'; const exampleInitialData = { number: 0, text: '기본 값', }; const exampleReducer = (state, action) => { // eslint-disable-next-line default-case switch (action) { case 'UP': { return { ...state, number: state.number + 1 }; } case 'DOWN': { return { ...state, number: state.n.. 2022. 8. 23. [React] 동적 라우팅 1-1. Router - Route(경로)를 찾아가는 행위 즉 라우팅이란, 다른 경로(url주소)에 따라 다른 View(화면)을 보여주는 것 1-2. SPA (싱글 페이지 앱, 단일 페이지임) -> 사용자가 다른 뷰로 이동할 때 앱은 뷰를 동적으로 다시 그림 --->SPA는 MPA(페이지간 이동)보다 빠름 2. 정적 / 동적 라우팅 -> path에 1대 1로 경로를 지정해놓은 것 -> 정적 라우팅 ->상품 번호별로 url 막 여러개 구성되어있는게 동적 라이팅임!!!! -> 아이디 값을 가져와서 parameter로 지정해놓고 무수한 url을 만듬 ! ->>>path parameter, query parameter 를 통해 만들 수 있다 쓰는 법 !! 2-1. path parameter Netflix Zil.. 2022. 6. 26. [React] component, state, props, useEffect 연습 ( Monsters ) Monsters 는 1. fetch를 이용해서 API 데이터(객체 배열)를 불러오고, 그 데이터를 state에 저장한다. 2. state를 자식 컴포넌트에게 props 를 사용하여 값을 전달해준다. 3. 자식 컴포넌트에서 map 함수로 배열을 화면에 나타내고, 그 자식 컴포넌트에서 각 객체의 키 값으로 각 배열의 정보를 불러온다. 4. 검색 창을 만들어 입력 값을 받고, filter 함수로 검색 창의 입력 값과 동일한 name 값을 가진 요소만 나타나게 해준다. 의 과정으로 구성된 연습 페이지이다 ! fetch 로 API 가져오기. useEffecf 의 종속 배열을 []로 주어서 렌더링 시 처음에만 실행되게 했다. useEffect(() => { fetch("https://jsonplaceholder.t.. 2022. 6. 18. 이전 1 2 다음 반응형
