허도경, limewhale

TL;DR😄 리액트나 Vue를 이용해서 개발을 하게 될 때 React와 Vue모두 각각의 라이프사이클(생명주기)이 있습니다. '라이프사이클(생명주기)'라는 말을 처음 접하는 분이라면 라이프사이클이라는 말이 막연하게 느껴질 수 있는데 이 부분은 아래 글을 읽으면 자연스럽게 이해할 수 있습니다. 리액트에서 라이프사이클의 개념은 클래스 컴포넌트를 사용할 때 명확히 사용되는 부분인데 React 16.8 이후 리액트 훅(함수형 컴포넌트)의 개념이 등장하면서 생명주기의 개념도 이전처럼 명확하게 구분되어 사용되진 않습니다. 그럼에도 우리는 리액트의 라이프사이클을 알아야 합니다. 아직 React에서는 공식적으로 클래스 컴포넌트와 함수형 컴포넌트 모두 지원을 할 것이라고 발표했고 이전에 작성된 코드들은 대부분 다 클래스..

React Router Dom의 버전이 V6로 변경되면서 이전에 사용되던 Hooks나 기능들이 변경되었습니다. 보다 자세한 내용은 역시 공식문서를 확인하는 게 가장 좋지만 프로젝트를 진행하면서 바로 동작이 가능하려면 우선 무엇이 변경되었는지 알아야 하겠죠? 이번에 정리를 통해 알아보도록 할게요! 출바알!🎶 👍 React v16.8 React Router v6은 React Hook을 많이 사용하므로 React Router v6으로 업그레이드를 시도하기 전에 React 16.8 이상에 있어야 합니다. 좋은 소식은 React Router v5가 React >= 15와 호환된다는 것입니다. 따라서 v5(또는 v4)를 사용 중이라면 라우터 코드를 건드리지 않고도 React를 업그레이드할 수 있어야 합니다. 만약 ..

💡 제어 컴포넌트 제어 컴포넌트에 대한 공식문서의 설명은 아래와 같습니다. 제어 컴포넌트는 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다. React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트됩니다. (중략) 이러한 방식으로 React에 의해 값이 제어되는 입력 폼 엘리먼트를 “제어 컴포넌트 (controlled component)“라고 합니다. https://ko.reactjs.org/docs/forms.html#controlled-components 사용자 입력을 기반으로 자신의 state를 관리하고 업데이트한다라고 정의되어 있는데,,🤔 솔직히 어떤 말인지 잘 와닿지 않습니다. 한번 코드로 살펴보겠습니다...

설명에 들어가기 전에 필수 개념 2가지를 먼저 눈에 익혀주세요. Render: DOM Tree 를 구성하기 위해 각 엘리먼트의 스타일 속성을 계산하는 과정 Paint: 실제 스크린에 Layout을 표시하고 업데이트하는 과정 💡 useEffect useEffect는 컴포넌트들이 render와 paint 된 후 실행됩니다. 비동기적(asynchronous) 으로 실행됩니다. paint 된 후 실행되기 때문에, useEffect 내부에 dom에 영향을 주는 코드가 있을 경우 사용자 입장에서는 화면의 깜빡임을 보게됩니다. useEffect의 라이프사이클 (출처) 💡 useLayoutEffect useLayoutEffect는 컴포넌트들이 render 된 후 실행되며, 그 이후에 paint 가 됩니다. 이 작업은 ..

💡 rendering이란? 사용자의 화면에 미리 정의해 둔 화면을 보여 주는 것을 렌더링이라고 합니다. 💡 re-rendering이란? 사용자의 화면에 변화가 생겨(데이터 변경, 화면의 사이즈 축소 또는 확대 등)서 이를 다시 새롭게 정의하여 보여주는 것을 의미합니다. ✔ 컴포넌트가 re-rendering 되는 조건 자신의 상태가 변경될 때 (state 변경) 부모 컴포넌트가 re-rendering(리렌더링) 될 때 자신이 전달받은 props가 변경될 때 forceUpdate 함수가 실행될 때

Props 부모 컴포넌트에서 자식 컴포넌트한테 전달하는 데이터 값으로 읽기 전용의 데이터입니다. 불변의 데이터 부모로부터 전달되는 데이터(읽기 전용) 변경 불가 State (상태) 컴포넌트에서 사용하는 값으로 값을 수정하고 사용할 수 있는 데이터입니다. 가변 데이터 구성 요소에 의해 유지 변경 가능 Props와 State 차이점 State는 내부 (컴포넌트)에서 생성하고 활동하고, 데이터를 변경할 수 있고 Props는 외부(부모 컴포넌트)에서 상속받는 데이터이며, 데이터를 변경할 수 없습니다.

메모이제이션(memoization)이란? useMemo 함수에 대해서 알아보기 전에 알고리즘 시간에 자주 나오는 메모이제이션(memoization) 개념에 대해서 잠깐 알아보겠습니다. memoization이란 기존에 수행한 연산의 결괏값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말합니다. memoization을 잘 적용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화할 수 있습니다. useMemo와 useCallback을 너무나도 어렵게 설명하는 곳이 많아서 여기서는 간단하게만 알아보겠습니다. 1. useMemo 메모이제이션된 '값'을 반환한다. 용법 useMemo(() => fn, deps) useMemo는 deps 가 변한다..

React Hook 주의점 최상위 바깥에 선언해서 실행 순서가 일정하게 하는 것이 중요합니다. 조건문 안에서 Hook를 실행시키지 않습니다. hook안에 hook을 사용하지 않습니다. Hook을 일반적인 JavaScript 함수에서 호출하지 않습니다. React 함수 컴포넌트에서 Hook을 호출하세요. Custom Hook에서 Hook을 호출하세요. 리액트에서 Hook을 반복문, 조건문 혹은 중첩된 함수 내에서 호출하지 않습니다. Hook은 React 함수의 최상위(at the top level)에서 Hook을 호출해야 합니다. 이 규칙을 따르면 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 Hook이 호출되는 것이 보장됩니다. 이러한 점은 React가 useState와 useEffect 가 여러 번 ..

React에서 특정 URL에서 전달한 Params값을 가져와야 할 때 리액트 라우터 돔을 사용하면 useParams를 사용하면 되지만 사용 환경에 따라 nextjs를 사용하거나 리액트 라우터 돔을 사용하지 않을 경우 해당 Params값을 추출하기 위해 라우터 돔을 설치하는 것은 굉장히 비효율적입니다. 이때 쉽게 Params 값을 가져와서 처리할 수 있는게 window의 기본 객체인 location객체의 search 파라미터입니다. 리액트에서의 location은 javascript의 window.location과 동일합니다. search 파라미터는 url의 ? 뒤에 전달하는 파라미더값을 가져올 수 있습니다. 가령 위의 주소처럼 'localhost:3000/?id=1' 과 같은 주소가 있다면 가져올 키 값은..

리액트를 공부하면서 클론 코딩이나 기타 코드를 연습하면서 Github에 소스를 배포하고 관리하고 싶을 거라 생각합니다. git으로 코드를 관리하면 소스의 history를 알 수 있을 뿐 아니라 어느곳에서나 자신이 만든 소스를 다운로드하고 다시 커밋하여 반영할 수 있기 때문에 git으로 소스를 관리하면 굉장히 유용합니다. gh-page 플러그인을 이용하면 웹 사이트에 접속하는 것처럼 자신이 만든 프로젝트 사이트를 소스코드가 아닌 웹 화면으로도 접속할 수 있습니다. 더욱이 이 모든 게 무료로 호스팅을 제공합니다. 이제부터 그 방법을 알아보려고 합니다. 너무나 당연한 이야기지만 Github에 소스를 배포하려면 Github에 회원가입이 되어 있어야 합니다. 만약 회원가입이 되어 있지 않다면 회원가입부터 우선적으..