안녕하세요! RyuWoong입니다. 이번에 이야기의 주제는 Context API 입니다. Context? 우선 Context에 대해 먼저 알아봅시다. Context는 React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법입니다. React를 공부하다보면 전역상태관리라는 말을 한번쯤은 들어보신적이 있을 겁니다. 짧게 말하면 전역상태관리를 위해 고안된 방법이라고 말씀드릴수 있겠네요. 전역으로 관리하는 데이터로는 로그인 정보나 테마, 언어 설정 등을 예로 들수 있을 것 같습니다. 어떤 때에 사용하면 좋을까요? 일반적으로 React는 데이터 구조가 하향식(단방향)입니다. 따라서 하위 컴포넌트에 데이터를 전달하기 위해선 Props Drilling이 발생하게 ..

안녕하세요. RyuWoong입니다. 이번에 이야기의 주제는 useReducer입니다. 상태관리 라이브러리인 Redux를 사용해 보셨으면 꽤 친숙한 Hook 이실텐데요. 한 번 알아보러 가봅시다. useReducer useReducer는 상태 관리 Hook 입니다. useState를 대체할 수 있는 Hook인 것이죠! 🤔 다수의 하윗값을 포함하는 복잡한 정적 로직을 만드는 경우나 다음 state가 이전 state에 의존적인 경우에 보통 useState보다 useReducer를 선호합니다. useReducer는 자세한 업데이트를 트리거 하는 컴포넌트의 성능을 최적화할 수 있게 합니다. 공식 문서에서는 useReducer를 어떤 때에 사용하는 것이 좋은지 위와 같이 말하고 있습니다. 어떤 의미인지 코드와 함께..

안녕하세요. RyuWoong입니다. 이번 포스팅은 Routing에 관한 내용입니다. Next는 CRA(Create React App)과 다른 방법인 파일 기반 라우팅을 지원합니다. 어떻게 다른지 한번 알아보러 가시죠! Basic Next.js에서는 파일 시스템 기반의 Router를 사용합니다. 이게 무엇이냐? Pages 폴더 내에 만든 폴더와 파일이 곧 Router 경로가 됩니다. //일반적인 경로 pages/index.js → / pages/blog/index.js → /blog //중첩라우팅 pages/blog/first-post.js → /blog/first-post pages/dashboard/settings/username.js → /dashboard/settings/username Dynami..

안녕하세요! RyuWoong입니다. 곧 설날인데, 새해는 잘 맞이 하셨나요? 저도 어울리는 사람이 되기 위해 노력중에 있습니다! 이번에는 Next.js 를 공부중인데 정리해서 가져왔습니다. 추가로 Canvas도 공부중이고 알고리즘과 자료구조도 함께 다시 공부 중입니다. 꽤 많은 글이 자주 포스팅 될 것 같네요. : ) 그럼 Next.js 한번 해볼까요? Next.js? React를 좀 더 편하고, 더 사용성 좋게 해주는 Framework 입니다! 등장배경은 React는 SPA(Single Page Application) 형태로 제작되는데 이는 SEO(Searh Engine Optimization)에서 매우 불리합니다. 또한 첫 접속 시 구동을 위해 필요한 모든 파일을 내려 받는 구조로 파일을 내려 받는 ..

안녕하세요. RyuWoong입니다. 어느 새 2022년도 저물고 있습니다. 이번 해는 어떤 해라고 생각하시나요? 저는 2021년에 비해 2022년은 많이 성장 했다고 느끼면서, 더 빠르게 성장하고 싶은 욕심을 느꼈던 해 인 것 같습니다. 비전공자인 제가 2021년 4월 Front-End 개발자로 취직해 2022년 12월 중순까지 달려왔습니다. 회사에서 React Native Front-End 개발자로 일하면서 2021년과 다르게 2022년은 폭 넓은 고민을 해왔던 해인 것 같습니다. 새 프로젝트를 시작하면서 더 나은 방법을 없을까? 좀 더 깔끔하게 작성할 수 없을까? 라는 개발적인 고민과 PM도 함께 담당하면서 어떻게 문제를 해결할지, 또 언젠가 팀리더가 된다면 어떤 팀리더가 되야할까 등의 다양한 고민을..