허도경, limewhale

TL;DR😄 리액트나 Vue를 이용해서 개발을 하게 될 때 React와 Vue모두 각각의 라이프사이클(생명주기)이 있습니다. '라이프사이클(생명주기)'라는 말을 처음 접하는 분이라면 라이프사이클이라는 말이 막연하게 느껴질 수 있는데 이 부분은 아래 글을 읽으면 자연스럽게 이해할 수 있습니다. 리액트에서 라이프사이클의 개념은 클래스 컴포넌트를 사용할 때 명확히 사용되는 부분인데 React 16.8 이후 리액트 훅(함수형 컴포넌트)의 개념이 등장하면서 생명주기의 개념도 이전처럼 명확하게 구분되어 사용되진 않습니다. 그럼에도 우리는 리액트의 라이프사이클을 알아야 합니다. 아직 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 가 됩니다. 이 작업은 ..

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

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에 회원가입이 되어 있어야 합니다. 만약 회원가입이 되어 있지 않다면 회원가입부터 우선적으..

useHistory란? useHistory를 사용하면, 페이지 방문 기록을 쉽게 관리할 수 있으며 여러가지 내장 함수를 사용해 뒤로가기, 특정 페이지로 이동하기 등을 구현할 수 있습니다. 이 hook을 사용하려면 리액트 16.8 버전 이상이어야 합니다. 1. goBack() 사용하여 뒤로가기 useHistory 내장 함수인 goBack을 사용하면 뒤로가기를 쉽게 구현할 수 있습니다. 1) useHistory를 import import React from 'react' // 요기 import { useHistory } from 'react-router-dom'; function Login() { return ( 로그인 페이지입니다. 로그인 뒤로가기 ) } export default Login 2) 변수를 ..

안녕하세요! 오늘은 제가 프로젝트들을 진행해오면서 편리함을 느꼈던 react-router-dom의 유용한 hooks들에 대해서 소개하려고 합니다. 리액트 라우터가 웹 내에서 단순 페이지 라우팅을 하기도 하지만 URL에서의 도움을 많이 주는 라우터 라이브러리라고 생각합니다. 아래에는 총 3가지의 hooks들이 있습니다. react-router-dom 5.1v 부터 hooks들이 지원이 됩니다. react-router-dom을 설치하는 과정은 두 개 중 하나를 선택하여 터미널에 입력합니다 1. yarn add react-router-dom 2. npm install react-router-dom 1. useHistory 대부분의 react-router-dom을 이용한 리액트 프로젝트의 App.tsx는 아래와..

TypeScript가 미 적용되어 있던 프로젝트를 타입 스크립트를 적용하고 페이지의 스타일을 Import하니 에러가 호출되었습니다. 우리가 일반적으로 React에서 사용하는 스타일을 Import 하는 방식은 아래와 같습니다. import styles from "./App.module.scss"; 하지만 위의 방식으로 스타일을 불러오게 되면TypeScript를 사용할 때 module.scss(혹은 module.css 등)를 import 하게 되면 [ './App.module.scss' 모듈 또는 해당 형식 선언을 찾을 수 없습니다. ]와 같은 에러를 발생시키는데 이 에러는 스타일을 module로 import 할 때만 발생하며, 아래와 같이 스타일을 import 할 때는 발생하지 않습니다. import "...

리액트에서 Link에 state를 이용하여 이동하는 페이지에 특정값을 전달할 수 있습니다. 전달받은 페이지에서는 'useLocation' 항목을 이용하여 해당 값을 받아올 수 있는데 이 부분을 TypeScript를 적용하게 되면 오류가 발생하게 됩니다. 전달받은 값에 대한 타입이 지정되지 않았기 때문인데 이 부분을 쉽게 설명하고 해결하는 방법이 있어서 공유합니다. State를 이용하여 값 전달