React.js

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

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

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

JS에서 함수는 코드를 더 명확하고 재사용 가능하게 해준다. 함수는 함수 안에 다른 함수를 호출 할 수 있는데, 이는 함수가 해야 할 일을 명확히 분리할 수 있게 해준다. 즉 모든 명령을 하나의 함수 안에 다 작성할 필요가 없고, 각 작업에 특화된 여러 함수를 만들어

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

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

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

자바스크릅트에서 제공하는 API를 이용해 DOM 조작을 하는 것이 리액트 방식을 이용하는 것보다 더 쉬운 경우가 있다.이를 위해 리액트는 HTML 엘리먼트에 대한 DOM API에 접근할 수 있게하는 ref라는 도구를 제공한다.또한 페이지 안의 어떤 HTML 엘리먼트든

리액트 프로젝트 개발환경 구축을 처음부터 설정하는 것은 굉장히 복잡하다. 그러나 create-react-app을 사용하면 쉽게 개발환경을 설정할 수 있다.create-react-app은 페이스북에서 만든 공식적인 React 웹 개발용 Boilerplate이다. 직접 모

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

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

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

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

가장 많이 사용하는 리액트 상태관리 라이브러리리덕스를 사용하면 컴포넌트의 상태 업데이트 로직을 다른 파일로 분리시켜 더욱 효율적으로 관리할 수 있다.전역 상태를 관리할 때 굉장히 효과적. 단순히 전역상태 관리만 한다면 Context API를 사용하는 것으로도 충분. 하

리덕스를 사용할 때 가장 많이 사용하는 패턴은 프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트를 분리하는 것이다.프레젠테이셔널 컴포넌트 : 상태관리가 이루어지지 않고, 그저 props를 전달받아 화면에 UI를 보여주기만 하는 컴포넌트컨테이너 컴포넌트 : 리덕스와 연동되어 있

소프트웨어 공학에서 미들웨어란 운영체제와 응용 소프트웨어 중간에서 조정과 중개의 역할을 수행하는 소프트웨어를 말한다.리덕스 미들웨어는 액션을 디스패치 했을 때 리듀서에서 이를 처리하기에 앞서 사전에 지정된 작업을 실행한다. 미들웨어는 액션과 리듀서 사이의 중간자라고 볼

리액트 프로젝트를 완성하여 사용자에게 제공할 때는 빌드 작업을 거쳐 배포해야하며, 이는 웹팩이 담당한다.웹팩에 별도의 설정을 하지 않으면 프로젝트에서 사용 중인 모든 자바스크립트 파일이 하나의 파일로 합쳐지고, 모든 CSS 파일도 하나의 파일로 합쳐진다.CRA(crea

그냥 리액트에서는 react-route-dom 라이브러러리를 통해 페이지간 라우팅을 구현할 수 있지만, next.js 에서는 pages 폴더 안에 있는 파일을 생성하면 자동으로 라우팅이 구현된다. pages 폴더 안의 파일이름이 해당 페이지의 주소가 된다.(export

next.js에서는 루트 폴더에 있는 public 폴더에 이미지 파일 같은 정적파일을 보관하고, / 로 시작하는 url로 파일에 접근 가능합니다. 예를들어 public 폴더 내에 sample.png 파일이 있다면 코드 내에서는 /sample.png로 접근 가능합니다.n

기본적으로 next.js는 모든 페이지를 pre-rendering 한다. next.js는 클라이언트 사이드 js에 의해 모든 페이지가 렌더링 되는 것 대신 사전에 모든 페이지의 html을 생성한다. pre-rendering은 더 나은 성능과 SEO를 제공한다.생성된 각