코딩하는라민

[React] React Router 📌 라우팅 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것 여러 페이지로 이루어진 웹 애플리케이션을 만들 때 페이지별로 컴포넌트를 분리해서 프로젝트를 관리하기 위해 라우팅이 필요하다. 리액트 라우터는 라우팅 시스템으로 가장 많이 사용하는 인기있는 라이브러리이다. 리액트 라우터를 사용하면 SPA(Single Page Application) 를 구현할 수 있다. 📌 Single Page Application(SPA, 싱글 페이지 애플리케이션) SPA 는 한 개의 페이지로 이루어진 애플리케이션이다. 리액트 라우터는 여러 페이지로 이루어진 프로젝트를 만들 수 있는 것이라고 했다. 그런데 왜 싱글 페이지 애플리케이션이라고 하는 것일까? ✅ MPA(Multipage ..

[React] Hooks - useMemo (최적화하기) 📌 컴포넌트는 언제 렌더링되는가 컴포넌트는 자신의 state 가 변경되거나, 자신의 props 가 변경되거나, 상위 컴포넌트가 리렌더될 때 렌더링이 일어나게 된다. 📌 useMemo 를 사용하는 이유 ✅ 리액트는 다시 렌더링될 때마다 구성요소의 전체를 다시 실행한다. 위에서 본 바와 같이 컴포넌트의 렌더링은 한번이 아닌 계속해서 일어날 수 있다. 상위 컴포넌트가 리렌더링되거나 자신의 props, state 가 변경되었을 때 리렌더링된다. 이렇게 매번 리렌더링이 일어날 경우 간단한 구조라면 렌더링이 빠르겠지만, 무거운 페이지 전체를 리렌더링한다는 것은 성능 측면에서 좋지않다. 따라서 데이터의 변경이 없는 경우라면 리렌더링하지 않고, 데이터의 변경이 ..

[React] Hooks - Context API 📌 context 를 사용하는 이유 리액트에서는 데이터가 위에서 아래로 props를 통해 전달된다. 즉, 단반향 하향식 데이터 흐름이다. 여러 컴포넌트에 props 을 전해줘야하는 경우 굉장히 번거로워진다. props 를 하위 컴포넌트에 전달해줄 때 트리 단계마다 명시적으로 props 을 넘겨줘야하는데, context 를 이용하면 하위 컴포넌트들에 연쇄적으로 props 를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다. 📌 context 를 언제 사용하는가 Header Container Nav 상위 컴포넌트 Header 부터 최하위 컴포넌트 Nav 가 있다고 해보자. Container 에는 props 를 전달하지 않고 Nav 에만 절달하고..

[React] Hooks - useEffect ( ) 📌 클래스형 컴포넌트의 생명주기 [React] 라이프사이클(LifeCycle) - React 의 생명주기 [React] 라이프사이클(LifeCycle) - React 의 생명주기 📌 LifeCycle 어떤 프로그램이 실행되고 종료되는 것을 나타내기 위해 사용하는 용어를 가리킨다. 즉 라이프사이클은 컴포넌트가 브라우저상에 렌 ramincoding.tistory.com Mount Update Unmount ComponentDidMount ComponentDidUPdate ComponentWillUnmount 컴포넌트가 태어나는 순간 mount 되는 순간에 사용할 수 있는 메서드 컴포넌트가 변화하는 순간에 사용할 수 있는 메서드 컴포넌트가 화면에서 사라지기..

[React] 라이프사이클(LifeCycle) - React 의 생명주기 📌 LifeCycle 어떤 프로그램이 실행되고 종료되는 것을 나타내기 위해 사용하는 용어를 가리킨다. 즉 라이프사이클은 컴포넌트가 브라우저상에 렌더링되고, 업데이트 되고, 사라지는 과정을 말한다. 탄생 : 컴포넌트가 화면에 나타나는 순간 (Mount) → ex) 초기화 작업 변화 : state가 리렌더되는 과정 (Update) → ex) 예외 처리 작업 죽음 : 컴포넌트가 화면에서 사라지는 과정 (UnMount) → ex) 메모리 정리 작업 📌 컴포넌트에서 lifecycle 을 제어한다는 것은 무슨 의미일까? ✅ 클래스형 컴포넌트에서 사용 클래스형 컴포넌트에서는 DOM 요소를 가져오거나 서버에서 데이터를 가져오기 위해서 API 를 ..

[React] Hooks - useState ( ) 📌 useState 함수형 컴포넌트에서는 '상태' 를 관리할 수 없었다. 하지만 React 16.8 에서 Hooks 가 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 된 것이다! '상태' 란 무엇일까? 상태는 컴포넌트에서 동적인 값을 말한다. 함수형 컴포넌트에서는 변하는 상태의 개별적인 업데이트가 요구된다. 클래스형 컴포넌트에서는 데이터를 교체하고 하나로 합친다. ✅ useState React 16.8부터 사용할 수 있게 된 Hooks 중의 하나인 useState 는 컴포넌트의 상태를 관리할 수 있다. useState()는 state와 state를 업데이트 하는 함수를 쌍으로 제공한다. const [state, setState] = useSta..

[React] form 제어하기 📌 form , , 와 같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트한다. state 를 누가 관리하느냐에 따라 제어 컴포넌트와 비제어 컴포넌트로 나뉘게 된다. element 를 가지고 있는 컴포넌트가 관리할 경우 제어 컴포넌트, element의 state 만 관리하지 않고 element 의 참조만 컴포트가 소유한다면 비제어 컴포넌트라고 할 수 있다. 아이디 비밀번호 찾기 📌 제어 컴포넌트(Controlled component) React 컴포넌트는 폼을 통해 사용자의 입력값을 제어할 수 있다. 컴포넌트의 state 를 '신뢰 가능한 단일 출처(Single Source of Truth)'로 만들어 HTML + React 요소를..

[React] 리스트(배열) 렌더링, Key 📌 JS 에서 리스트를 반환하는 방법 const arr = [1, 2, 3]; const arrChange = arr.map((arr) => arr + 1); console.log(arr, arrChange); map 함수는 배열 안의 요소로 새로운 배열을 반환한다. 원본을 변형하지 않는다. 리액트에서도 자바스크립트에서처럼 리스트를 반환하는 방법은 비슷하다! 리액트에서는 map 함수를 이용해 리액트 엘리먼트를 반환하면 된다. Array.prototype.map() - JavaScript | MDN map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다. developer.mozilla.org 📌 리액트..

[React] 조건부 렌더링 📌 조건부 렌더링 리액트에서는 원하는 동작을 `캡슐화`하는 컴포넌트를 만들 수 있다. 이렇게 하면 상태에 따라 몇 개의 컴포넌트만 화면에 효율적으로 렌더링할 수 있다. 조건부 렌더링은 특정 조건에 따라 다른 결과물을 렌더링하는 것이다. 리액트에서는 조건, 상태에 맞는 컴포넌트를 반환을 위해 if문이나 조건부 연산자를 사용한다. ✅ if문 사용해서 조건부 렌더링하기 조건에 따라 보여지는 컴포넌트또는 내용이 다를 경우 조건부 렌더링하면 된다. function Sleep(){ return console.log('Go to sleep'); } function Study(){ return console.log('Study...') } 두 함수 중에서 상태에 따라 하나의 컴포넌트만 보여..

[React] state 컴포넌트가 데이터를 다루는 방법으로는 props 를 이용한 방법, state 를 이용한 방법, contet 를 이용한 방법이 있다. 📌 state 란? 클래스형 컴포넌트에서는 state를 통해서 기억할 수 있는 임의의 데이터를 관리할 수 있다. 하지만 함수형 컴포넌트에서는 그렇게 하지 못한다. 그대신 함수에서는 React Hooks 이라는 것을 제공해 state 를 관리할 수 있다. 📌 state 는 언제 사용하는가? 컴포넌트가 정보를 계속 추적 해야하는 경우, state를 생성하거나 업데이트하고, 사용할 수 있다. 📌 props 와의 차이 값이 변경되면 새로운 return 값을 만들어서 UI를 바꿔준다. 컴포넌트에 prop 을 입력하면 컴포넌트 함수가 처리해서 return 값을..