coding- w00se

리액트 파일은 통상적으로 .js 대신 .jsx 확장자를 사용합니다. 이런 컨벤션은 JSX가 표준 Javascript가 아니기 때문에 발생했다고 합니다. 즉 파일 내부에 표준 Javascript 문법만 사용됐다면 파일 확장자로 .js가 적절합니다. 반면에 jsx나 Typescript처럼 파일 내부에 표준 Javascript 이외에 다른 코드가 있다면 해당 파일의 확장자는 .js가 아닌 다른 확장자로 지정한다고 합니다. 예를 들어 jsx가 사용된 파일 확장자는 jsx로, typescript가 작성된 파일 확장자는 .ts로 지정합니다. 참고 자료 https://stackoverflow.com/a/46169521

기존 RN 프로젝트를 Refactoring 하기 위해 Redux를 공부했습니다. 하지만 아쉽게도 팀 내부 회의 후 Redux 대신 MobX를 도입하기로 결정해서 Redux로 Refactoring을 진행하지는 못했지만, Redux를 공부한 내용을 간단히 정리하려 합니다. (MobX는 추가적으로 더 공부한 후 정리하려 합니다😁) ※해당 게시글은 Redux에 대해 자세한 설명보다는 각 용어나 개념에 대한 짧은 정리 수준의 내용으로 이뤄져 있습니다. 조금 더 깊고 많은 내용을 원하시는 분은 참고 자료에 있는 게시글 들을 보시는 것도 좋을 거 같습니다. Redux란? 점유율이 가장 높은 상태 관리 라이브러리로, 글로벌 상태 관리를 쉽게 할 수 있도록 도와준다. - container component와 presen..

React의 컴포넌트 안에 로컬 함수를 정의하면 컴포넌트가 다시 렌더링 될 때마다 함수가 새로 만들어진다. 더 자세히 말하면 함수가 새로운 메모리 주소에 다시 만들어 지는 것이다. useCallback을 사용하면 특정 조건을 만족할 때만 함수를 새로 만들 수 있다. useCallback 이란? React 공식 문서에 'useCallback은 dependencies(특정 조건)에 의해서만 바뀌는 memoized 된 콜백을 반환한다.' => 즉, dependencies가 바뀔 때만 함수가 새로 만들어진다. useCallback에 대한 더 자세한 설명은 아래의 공식 문서에서 확인 가능하다. https://reactjs.org/docs/hooks-reference.html#usecallback Hooks API..

렌더링을 최적화하기 위해서는 컴포넌트가 렌더링 되는 시점을 알아야 한다. 공식 문서에서 해당 내용을 찾아보고 싶었지만 아쉽게 찾지 못했고, 구글링을 통해 해답을 찾았다. React에서 컴포넌트가 리렌더링되는 시점은 크게 네 가지로 나뉜다. 1. 부모 컴포넌트가 리렌더링 될 때 2. props가 변할 때 3. state가 변할 때 4. forceUpdate가 호출될 때 위 네 가지 경우 중 1번은 불필요한 렌더링을 초래할 수 있다. 자세히 말하면 부모 컴포넌트에서 자식 컴포넌트로 전달되는 props에는 변화가 없는데, 부모 컴포넌트의 리렌더링으로 인해 자식 컴포넌트도 불필요하게 리렌더링 되는 경우다. 이런 경우를 방지하기 위한 방법으로는 자식 컴포넌트에 React.memo를 적용하는 것이다. React.m..