Under the Sign of Saturn

최근에 react-router-dom을 쓰려고 보니 버전 업이 되어서 기존에 알던 v5의 사항들이 많이 바뀐 것을 알았다. 가령 Switch가 Routes로, Redirect가 Navigate 등으로 대체되는 것이 있었는데, 좀 더 확실히 이해 가능한 컴포넌트 이름으로 변경되기도 했고, 기존 rediect 문제를 해결하기 위해 Navigate API가 도입되기도 했다. 아래는 공식 문서를 읽으면서 필요한 내용만 정리해보았는데, 더 자세한 내용은 이곳에서 확인할 수 있다. 공식 문서에서 말하길, 우선 v5와의 하위 호환성을 유지하기 위한 패키지는 조금 시일이 걸릴 것 같다고 한다. 몇 가지 추가되는 routes가 있을 것인지, 변경될 것이 있을지는 모르겠지만..! We recommend waiting fo..

시작하며 Nomad Coder 강의 중 useTab 커스텀 훅 만드는 과정에서 제목에 써둔 것처럼 Re-rendering Issue와 Objects are not valid as a React 이슈를 만났다. 흔한 이슈이므로 작성하면서 이런 에러가 왜 발생했는지 써두고자 한다. 코드 Re-rendering Issue 정상적으로 작동할 때의 코드는 위 모습과 같다. 여기서 2번 주석 표시에서 실수를 하거나 아래 return 되는 리액트 컴포넌트의 onClick 부분을 잘못 적을 경우 Re-Rendering이 계속 발생할 수 있다. useTabs 훅은 객체 하나를 return 해주고, App() 함수형 컴포넌트에서는 이를 사용할 수 있게 한다. 맨 처음 UseTabs는 useState를 통해 currentI..

문제 상황 useEffect를 쓰면서 자주 만나는 에러 핸들링을 해보자. 문제 원인 및 해결 useEffect는 클래스 컴포넌트에서 componentDidMount()와 componentDidUpdate() 라이프 사이클 메소드 두 개를 합친 역할을 한다고 배웠다. 따라서, useEffect 함수의 두 번째 인자에 빈 배열을 넣거나, 업데이트 하고자 하는 state를 넣어주어 렌더링의 횟수를 제한해주어야 하는데, 위 에러는 해당 state가 빠졌거나, 잘못 들어갔거나 해서 나오는 에러이다. 문제의 원인이 된 코드는 App.js와 Snackbar.js 컴포넌트에서였다. App.js에서는 Redux를 통해 반응형 컴포넌트 빌딩을 위해 size를 store에 등록해주기 위해 리팩토링을 하다가 생겼다. func..

시작하며 1편에서 다루었던 글에서는 redux-actions를 사용하는데, redux와 react-redux 모듈로도 충분하지 않을까 싶었다. 패턴 역시 좀 더 직관적으로 이해할 수 있으면 좋을 것 같아서 즐겨보는 유튜버의 Redux 강의를 한 번 들어봤다. 디렉토리 구성 store └modules └ index.js └ test.js └config.js └index.js 기존에는 위 같은 구성이었다. 이를 간단하게 actions와 reducers로 구분했다. 기본 설정 1 step reducer 생성 reducers 폴더 내에 counter와 로그인 여부를 확인하는 isLoggedIn reducer를 만들어보기로 한다. // src/reducers/counter.js const counterReduce..

시작하며 App이 점점 규모가 커지면서 상태 관리할 필요를 계속 느끼고 있었는데, 이번에야 도입했다. 필요한 모듈을 설치하고, 간단하게 +/- 버튼을 통해 카운트되는 기능을 만들어보면서 Redux에 접근해봤다. 필요 모듈 다운로드 yarn add react-redux redux redux-actions yarn을 통해 위 dependencies를 받았다. 폴더 구성 최종 폴더 구성은 사진처럼 되어 있다. src/store 내 config.js, index.js 파일을 가지며, modules 폴더를 따로 두었다. store 1. config.js 파일 생성 해당 파일은 여러 store를 모아 외부 컴포넌트와 연결하기 위함이다. store는 state를 관리하는 일종의 보관처. // src/config.js..

useState 기본 Hook에 속하는 useState. 상태 유지 값과 그 값을 갱신하는 함수를 비구조화 할당을 통해 반환한다. 처음 렌더링이 된 시점에 반환된 state 값은 useState이 두 번째 인자 값과 같다. 코드 상단에 useState를 import해준 뒤, 함수형 컴포넌트 내부에 const \[value, setValue\] = useState(0); 로 value의 초기 상태값을 useState의 파라미터를 통해 0으로 초기화해준다. 이후, +1, -1이라는 버튼을 클릭했을 때는 setValue 함수를 통해 기존 value에 1을 더한 값을 파라미터로, 상태를 업데이트해준다. setValue 함수는 새로운 state 값을 인자로 받아 컴포넌트 Re-rendering을 시킨다. 이후 렌..

2021/02/21 - [👩‍💻/React.js] - [React.js로 만드는 Tech Blog] #4 Window.scrollY/window.pageYOffset 2021/02/16 - [👩‍💻/React.js] - [React.js로 만드는 Tech Blog] #3 master 브랜치로 통합하기/github pages에 재배포하기 2021/02/13 - [👩‍💻/React.js] - [React.js로 만드는 Tech Blog] #2 react router 네비게이션 라이브러리 활용 2021/02/09 - [👩‍💻/React.js] - [React.js로 만드는 Tech Blog] #1 Figma 프로토타이핑/개발환경 세팅/Grommet UI Library/useState/Responsive Hea..

2021/02/09 - [👩‍💻/React.js] - [React.js로 만드는 Tech Blog] #1 Figma 프로토타이핑/개발환경 세팅/Grommet UI Library/useState/Responsive Header 만들기 2021/02/13 - [👩‍💻/React.js] - [React.js로 만드는 Tech Blog] #2 react router 네비게이션 라이브러리 활용 2021/02/16 - [👩‍💻/React.js] - [React.js로 만드는 Tech Blog] #3 master 브랜치로 통합하기/github pages에 재배포하기 이슈 작업물의 Preview 이미지를 클릭하면 확대되는 기능을 구현했는데, 이미지를 닫고 원래 페이지로 돌아오면, 브라우저 상단으로 올라가는 이슈가 있었..

2021/02/09 - [👩‍💻/React.js] - [React.js로 만드는 Tech Blog] #1 Figma 프로토타이핑/개발환경 세팅/Grommet UI Library/useState/Responsive Header 만들기 2021/02/13 - [👩‍💻/React.js] - [React.js로 만드는 Tech Blog] #2 react router 네비게이션 라이브러리 활용 Github Pages에 배포된 기존 portfolio를 대체하기 위해서 second 라는 이름의 브랜치를 생성하고, 작업이 어느 정도 끝나서 second 브랜치를 master 브랜치로 아예 덮어쓰기를 진행하기로 했다. git checkout second git merge -s ours master git checkout ..

2021/02/09 - [👩‍💻/React.js] - [React.js로 만드는 Tech Blog] #1 Figma 프로토타이핑/개발환경 세팅/Grommet UI Library/useState/Responsive Header 만들기 [React.js로 만드는 Tech Blog] #1 Figma 프로토타이핑/개발환경 세팅/Grommet UI Library/useState/Responsive Header 테크 블로그 기획 기존에 GIthub Pages로 배포한 github.io 블로그를 가지고 있긴 했지만, 급할 때 템플릿 가지고 와서 고쳐 쓴 게 다라 레이아웃에 제약이 커 아예 새로 제작하기로 했다. 제작하며 여 uiyoji-journal.tistory.com 랜딩 페이지로만 꾸몄다면 네비게이션은 더 손 ..