다른 주소에서 다른 화면을 보여주는 것을 라우팅이라고 한다.클라이언트 사이드에서 이루어지는 라우팅을 구현하여 SPA를 쉽게 만들어 주는 라이브러가 react-router다.설치 : npm install react-router-dom프로젝트에 라우터 적용프로젝트에 리액트

이 글은 react todo-list 프로젝트 기준으로 작성되었습니다.아래의 상황에서 컴포넌트 리랜더링이 발생한다.자신이 전달받은 props가 변경될 때자신의 state가 변경될 때부모 컴포넌트가 리렌더링 될 때forceUpdate() 함수가 실행될 때todo list

리액트에서는 아래 4가지 스타일링 방식을 가장 많이 사용한다.일반 CSS : 가장 기본적인 방식Sass : CSS 전처리기(pre-process) 중 하나로 확장된 CSS 문법을 사용하여 CSS코드를 더욱 쉽게 작성 할 수 있게 해준다.CSS Module : 스타일을

Hook은 리액트 v16.8에 새로 도입된 기능으로 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수다. Hook은 class 안에서 동작하지 않으며, class를 사용하지

리액트도 결국에는 자바스크립트이기 때문에 이벤트를 처리하는 방식은 순수 자바스크립트와 동일하다. 먼저 이벤트를 리스닝 후 리스너를 작성하는 것이다. 이벤트 리스닝 : 특정 엘리먼트가 어떤 이벤트를 수신할지 결정하는 것이벤트 리스너 : 이벤트 리스너란 이벤트가 발생했을

리액트 컴포넌트 생명주기(Life Cycle) 리액트의 컴포넌트는 생명주기를 가진다. 생명주기란 컴포넌트가 생성되고 사용되고 소멸될 때 까지 일련의 과정을 말한다. 생명주기 안에서는 특정 시점에 자동으로 호출되는 메서드가 있는데, 이를 라이프 사이클 이벤트라고 한다.

컴포넌트에 저장하여 사용(변경)가능한 데이터를 상태(state)라고 한다.props는 부모로 부터 전달받은 데이터이며 변경이 불가능한 읽기전용 데이터인 반면, state는 캡슐화 되어있어 비공개이며 컴포넌트에 의해 제어(변경)이 가능하다.클래스 내부에서 생성자를 만든다

이 시리즈는 리액트 공식문서 및 '리액트를 다루는 기술(김민준 저)', '리액트 교과서(아자트 마르단 저)'를 바탕으로 작성되었습니다. 개인 노션에만 정리한 내용을 옮기다 보니 저도 모르게 출처 없는 타 블로그 등의 글이 있을 수 있습니다. 혹 출처를 아시는 분들은 알

자바스크립트의 영역이 커지면서 자바스크립트 만으로 대규모 어플리케이션을 만들 수 있는 시대가 왔다. 대규모 어플리케에션 중 프론트 사이드에서 돌아가는 애플리케이션 구조를 관리하기 위해 많은 프레임 워크들이 나왔다.이 프레임워크들은 주로 MVC, MVVM, MVW 아키택