I. 라우팅이란? 라우팅: 개념은 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것 블로그를 만든다고 가정한다면, 블로그 애플리케이션은 다음과 같은 페이지로 구성되어 있습니다. 글쓰기 페이지: 새로운 포스트를 작성하는 페이지 포스트 목록 페이지: 블로그에 작성된 여러 포스트의 목록을 보여주는 페이지 포스트 읽기 페이지: 하나의 포스트를 보여주는 페이지 이렇게 여러 페이지로 구성된 웹 애플리케이션을 만들 때 페이지별로 컴포넌트들을 분리해가면서 프로젝트를 관리하기 위해 필요한 것이 바로 라우팅 시스템입니다. 리액트에서 라우팅 시스템을 구축하기 위해 사용할 수 있는 선택지는 크게 두 가지가 있습니다. 리액트 라우터(React Router) : 리액트의 라우팅 관련 라이브러리 중 가장 오래되고 가장 많..

지난 포스트에서 추가되는 데이터가 적어서 컴포넌트를 관리하는데 불편하지않았습니다. 그러나 데이터가 무수히 많아지면 애플리케이션이 느려지게 됩니다. 이때 사용되는 것이 컴포넌트 성능 최적화입니다. 실습은 다음과 같은 순서로 진행됩니다. 많은 데이터 렌더링하기 크롬 개발자 도구를 통한 성능 모니터링 React.memo를 통한 컴포넌트 리렌더링 성능 최적화 onToggle 과 onRemove 가 새로워지는 현상 방지하기 react-virtualized 를 사용한 렌더링 최적화 이번 실습을 위해서는 일정관리 웹서버가 필요합니다. https://daradarav.tistory.com/64 의 주소를 참고하여 실습을 진행한 후 이 포스트를 봐주시길 바랍니다. [React] 10. 일정 관리 웹 애플리케이션 만들기 ..

우리는 이전의 단원들을 통해 리액트의 기본기부터 컴포넌트를 스타일링하는 방법까지를 배웠습니다. 지금까지 배운 내용을 활용하여 프런트 엔드를 공부할 때 자주 구현하는 일정관리 애플리케이션을 만들어보겠습니다. 이번 실습은 다음과 같은 순서로 진행됩니다. 프로젝트 준비하기 UI 구성하기 기능 구현하기 📌 프로젝트 준비하기 📚 프로젝트 생성 및 필요한 라이브러리 설치 일정 관리 애플리케이션을 만들기위해 터미널에 create-react-app을 사용한 명령어를 입력하겠습니다. 또한 프로젝트가 생성되면 todo-app 디렉터리로 이동하여 애플리케이션을 만들 때 필요한 라이브러리를 설치하세요. $ yarn create react-app todo-app $ cd todo-app $ yarn add node-sass c..

리액트 컴포넌트를 스타일링할 때는 다양한 방법이 있습니다. 자신이 필요하거나 회사가 원하는 방식으로 만들면 됩니다. 이번 포스트에서 알아볼 스타일링 방식은 다음과 같습니다. 일반 CSS : 컴포넌트를 스타일링하는 가장 기본적인 방식 Sass : 자주 사용되는 CSS 전처리기(prev-processor) 중 하나로 확장된 CSS 문법을 사용하여 CSS를 더욱 쉽게 작성할 수 있음 CSS Module : 스타일을 작성할 때 CSS 클래스가 다른 CSS 클래스의 이름과 충돌하지 않도록 고유의 이름을 지정하는 옵션 styled-components : 스타일을 자바스크립트 파일에 내장시킴, 해당 스타일이 적용된 컴포넌트를 스타일을 작성함과 동시에 만듦 이번 실습은 다음과 같은 순서로 진행합니다. 프로젝트 준비하기..

Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수 컴포넌트에서 상태 관리를 할 수 있는 더영헌 기능을 제공합니다. 이번 실습은 다음과 같이 진행됩니다. 리액트 내장 Hooks 사용하기 커스텀 Hooks 만들기 실습을 위해 create-react-app을 사용하여 새로운 프로젝트를 생성합시다. $ yarn create react-app hooks-tutorial 📌 useState useState는 가장 기본적인 Hook으로, 함수 컴포넌트에서 가변적 상태를 지니도록 합니다. 3장을 복습하며(https://daradarav.tistory.com/14) useState를 사용하는 카운터를 만들어봅시다. src 디렉터리에 Counter.js 파일을 만들어 다음의 코드를 작성합니다. // Counetr..

모든 리액트 컴포넌트는 라이프사이클(수명 주기)이 존재합니다. 컴포넌트의 수명은 페이지에 렌더링 되기 전, 준비 과정에서 시작하여 페이지가 사라질 때 끝납니다. 컴포넌트의 라이프사이클 메서드를 사용하는 경우는 다음과 같습니다. 컴포넌트를 처음으로 렌더링할 때 어떤 작업을 처리해야 하는 경우 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 하는 경우 불필요한 업데이트를 방지해야하는 경우 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용 가능합니다. 함수 컴포넌트에서는 Hooks 기능을 사용하여 비슷한 작업을 처리할 수 있습니다. 📌 라이프사이클 메서드의 이해 라이프사이클 메서드의 종류는 총 9가지입니다. Will 접두사가 붙은 메서드 : 어떤 작업을 작동하기 전에 실행되는 메서드 Did 접두사가 붙은 ..

웹 어플리케이션을 만들다 보면 반복되는 코드를 작성해야 할 때가 있습니다. // IterationSample.js const IterationSample = () => { reutrn ( 눈사람 얼음 눈 바람 ); }; export default IterationSample; 다음과 같이 .. 코드가 반복되는 양이 많아질 수록 코드양은 늘어나고 파일용량도 쓸데없이 늘어날 것입니다. 또한 데이터가 유동적이라면 이런 코드로는 관리할 수 없습니다. 리액트 프로젝트에서는 이러한 반복적인 내용을 효율적으로 관리하는 방법을 제공합니다. 📌 자바스크립트 배열의 map() 함수 📚 문법 자바의 배열 객체의 내장 함수인 map 함수를 이용하여 반복되는 컴포넌트를 렌더링할 수 있습니다. map 함수는 파라미터로 전달된 함..

일반 HTML에서는 DOM 요소에 이름을 달 때 id 값을 사용합니다. 특정 요소에 id 값을 달면 CSS에서 특정 id에 스타일을 적용하거나, 자바스크립트에서 해당 id를 찾아 작업하기도 합니다. 이렇게 HTML에서 id 를 사용하여 DOM에 이름을 다는 것처럼 리엑트 프로젝트 내부에서도 DOM에 이름을 다는 방법이 있습니다. ref를 사용하지 않은 코드를 보며 ref의 필요성을 알아보고, ref를 사용한 코드를 작성해보겠습니다. 이후 컴포넌트에 직접 ref를 달아 사용하는 코드도 작성해보겠습니다. 📌 ref는 어떤 상황에서 사용해야 할까? 📚 ref 의 주요 목적 예제를 통해 ref의 필요성을 알기 전에 REACT 공식 문서(https://ko.reactjs.org/docs/refs-and-the-d..

이벤트(event)란 사용자가 웹 브라우저에서 DOM 요소들과 상호작용하는 것을 의미합니다. 3장에서 사용했던 마우스 클릭이나 마우스 커서 올리기, 입력 등등이 이벤트의 예시입니다. html의 alert와 같이 사용자가 웹 브라우저에서 상호작용하는 것이 이벤트(event)입니다. 리액트의 이벤트는 순수 JavaScript 혹은 jQuery를 사용한 웹 어플리케이션에서 이벤트를 다루는 것과 동일합니다. 기존 HTML DOM Event를 알고 있다면 리액트의 컴포넌트도 쉽게 다룰 수 있을 것입니다. 클래스형 컴포넌트와 함수형 컴포넌트에서 이벤트를 다루도록 합시다 📌 리액트 이벤트 시스템 📚 이벤트를 사용할 때 주의사항 1. 이벤트 이름은 카멜 표기법으로 작성합니다. HTML의 onclick은 리액트에서 on..

3장에서 클래스형 컴포넌트와 함수형 컴포넌트에 대해 코드를 작성하며 배웠습니다. 선언 방식과 컴포넌트의 차이와 props, state 에 대한 자세한 설명과 관련 코드는 다음 링크를 참고하시길 바랍니다. https://daradarav.tistory.com/14 [React] 03. 컴포넌트 📌 컴포넌트 앞선 포스트에서 컴포넌트(component)는 리액트 프로젝트에서 특정 부분이 어떻게 생길지를 결정하는 선언체라고 배웠습니다. 리액트의 컴포넌트는 함수형 컴포넌트와 클래스형 daradarav.tistory.com 이번 챕터에서는 지난 포스트에서 다뤘던 컴포넌트에 대해 간단히 정리하겠습니다. 개념을 간단히 되짚어본 뒤, 클래스형 컴포넌트와 함수형 컴포넌트의 차이를 정리해보겠습니다. 컴포넌트 목적에 따라 나..