coding- w00se

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

얼마 전 코드 리뷰를 해주시는 팀원으로부터 '구조 분해 할당 준수 필요!'라는 내용의 피드백을 받았습니다. 덕분에 '구조 분해 할당'이라는 키워드도 알게 됐고, 이번 글에서는 '구조 분해 할당'에 대해 찾아본 내용을 정리하려 합니다. 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 값들을 개별 변수에 저장하는 Javascript의 표현식입니다. 사용 예시 구조 분해 할당 - 배열 예시 // 구조 분해 할당 - 배열 예시 // 구조 분해 할당 - 기본 사용 예시 let arr = [1, 2, 3, 4, 5] let [ first, second, ...rest ] = arr; console.log("frist: ", first); // first: 1 console.log("second: ", sec..

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

React에서는 컴포넌트(component) 외부에서 상태(state)를 관리하기 위한 방법으로 useReducer가 제공됩니다. useState와 useReducer 모두 상태를 관리하기 위한 Hook으로 어느 것을 사용해도 문제가 없지만 프로젝트 규모가 큰 경우 useReducer를 사용하는 것이 편리할 거 같습니다😊 오늘은 typescript로 useReducer를 사용하는 예제를 정리했습니다. useReducer에 대한 자세한 설명은 아래 공식 문서에서 확인할 수 있습니다. https://reactjs.org/docs/hooks-reference.html#usereducer Hooks API Reference – React A JavaScript library for building user in..

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..

Typescript도 연습하고 React에도 적응하기 위해 기초부터 다시 연습하려 합니다. 연습은 벨로퍼트님의 '벨로퍼트와 함께하는 모던 리액트'로 진행했습니다. 해당 게시글은 React를 Typescript로 연습하면서 타입 선언, 기존 Javascript를 사용했을 때와 다른 점을 위주로 기록했습니다. React에 대한 개념과 자세한 설명은 아래 링크에서 확인 가능합니다😊 https://react.vlpt.us 벨로퍼트와 함께하는 모던 리액트 · GitBook 벨로퍼트와 함께하는 모던 리액트 본 강의자료는 패스트캠퍼스 온라인 강의에서 제공하는 리액트 강의에서 사용되는 강의 문서입니다. 이 튜토리얼은 여러분들이 JavaScript 의 기초를 잘 알고있 react.vlpt.us Props의 각 속성에 타..