React

리액트는 최근들어 수요가 늘어나고 있는 웹 프레임워크 라이브러리 중 하나입니다. 자바스크립트를 이용해서 보통 사용자 인터페이스 제작에 사용되는 기술입니다.리액트(React, React.js)는 사용자 인터페이스를 만드는 자바스크립트 라이브러리입니다. 리액트는 구 페이스

리액트를 배우기전에 환경 세팅 방법을 알아보고 가겠습니다.먼저 리액트를 사용하기 위해서는 Node.js가 필요합니다. Node.js포스트에서 Node.js에 대한 간략한 지식과 설치법을 읽어주세요.그래도 여기서 Node.js를 간략히 설명 드리자면 자바스크립트 런타임으

이전 포스트를 따라가며 만들 프로젝트 폴더를 보니 App.js라는 파일이 눈에 띕니다. 자바스크립트? 하면서 들어간 그 파일에는 다음과 같이 알 수 없는 코드들이 짜여있습니다.자바스크립트 같긴한데, HTML 태그들이 들어가있고 알 수 없는 이 코드들이 무엇인지에 대해

우선 들어가기에 앞서 컴포넌트(Component)에 대해 알아봐야 합니다. 리액트에서 컴포넌트라고 하는 것은 자바스크립트의 함수 개념과 유사하다고 할 수 있습니다. 이 컴포넌트를 통해서 UI를 만들어냄은 물론이고 이벤트에 따른 동작 변화까지 만들어 낼 수 있습니다. 리

컴포넌트를 만들기 위해서 src 디렉토리 내부에 새 파일을 만들어 줍니다. 저는 분리를 위해 src 아래에 새로운 디렉토리를 만들고 그 안에 컴포넌트들을 모으기로 했습니다. 컴포넌트를 만들때 주의사항은 컴포넌트 파일명이나 컴포넌트명을 PascalCase 방식으로 지어야

props는 properties의 줄임 표현으로 말 그대로 속성입니다. 즉, props는 컴포넌트의 속성을 관리하는데 사용되는 요소라고 볼 수 있습니다. props의 설정은 속성을 설정할 컴포넌트가 아닌 컴포넌트를 불러와서 이용하는 부모 컴포넌트에서 설정한다는 점을 주

지난 포스트에서 함수형 컴포넌트의 props를 알아봤으니, 이번엔 클래스형 컴포넌트의 props 사용에 대해 알아보겠습니다. 클래스형 컴포넌트에서 props를 이용하는 방식은 함수형과 다르지 않습니다.먼저 비교를 위해 지난 시간에 만든 함수형 컴포넌트 코드를 가져와봤습

state는 컴포넌트 내부에서 바뀔 수 있는 값 입니다. props와의 차이점은 props는 컴포넌트에서 사용되기 위해 부모 컴포넌트가 설정해주는 값이기에 값을 바꾸기 위해서는 부모 컴포넌트에서만 접근했어야 합니다. 그래서 props는 마치 함수의 인자 처럼 외부에서

클래스형 컴포넌트에서도 state가 뭔지 설명했지만 다시 한 번 이야기하고 넘어가겠습니다.state는 컴포넌트 내부에서 바뀔 수 있는 값 입니다. props와의 차이점은 props는 컴포넌트에서 사용되기 위해 부모 컴포넌트가 설정해주는 값이기에 값을 바꾸기 위해서는 부

리액트가 전반적으로 사용자의 UI와 밀접한 관계를 갖고 있기 때문에 당연히 이벤트 핸들링과도 깊은 연관이 있습니다. 그렇기에 다음 단계로 넘어가기 전에 간단하게 리액트의 이벤트 처리를 알아보고 넘어가겠습니다.이벤트는 브라우저 내에서 일어나는 모든 행동들 입니다. 클릭하

리액트의 컴포넌트는 생성부터 소멸까지 생명 주기(라이프 사이클)를 가지고 있습니다. 개발자는 이 생명 주기 함수들을 이용해서 컴포넌트의 생성부터 사이의 원하는 시점에 동작을 삽입할 수 있습니다.서론에서 간단히 소개했듯이 리액트의 모든 컴포넌트들은 생명 주기를 가지고 동

HTML을 작성할 때 요소에 식별가능한 유일한 이름을 줄때 id를 이용했습니다. 그리고 id를 가지고 이런저런 작업들을 했었는데 이 기능을 리액트에서 이용할 수 있게 해주는 게 ref입니다. ref는 리액트에서 컴포넌트에 이름을 붙여주는 것 입니다.id를 쓰면 자바스크

Hook는 리액트 버전 16.8부터 새로 추가된 기능입니다. 이 Hook를 이용하면 기존 클래스형 컴포넌트들에서 이용하던 기능들을 함수형 컴포넌트에서도 이용할 수 있습니다. Hook가 등장해서 쓰이게 된 계기는 맨 아래 참조의 공식문서에 써있으니 한 번 읽어보시길 권해

useState()는 함수형 컴포넌트 내부에서 state 값을 관리(변경 등)을 하기 위해 사용하는 Hook입니다. 그러면 실제 사용을 통해 useState를 알아보겠습니다.다음은 버튼에 따라 글자와 문자가 변하는 간단한 컴포넌트입니다. 이 코드를 통해 useState

useEffect는 컴포넌트가 렌더링될 때마다 특정 작업을 하도록 만드는 Hook입니다. 라이프 사이클 메소드인 componentDidMount나 componentDidUpdate, componentWillUnmount를 함수형 컴포넌트에서 사용할 수 있게 해주는 Ho

이번에 소개할 Hook인 useMemo는 컴포넌트 내부 중에서도 연산에 대해서 최적화를 하는 Hook입니다. Memo라는 것은 우리가 간단하게 남기는 쪽지가 아니고, 메모이제이션(memoization)이라는 용어에서 왔습니다. 이 메모이제이션은 컴퓨터공학 용어로 연산을

useCallback Hook는 지난 포스트에서 다룬 useMemo처럼 최적화를 담당하고 있습니다. 차이점은 useMemo는 컴포넌트 내부 연산을 주로 최적화 하고, useCallback은 렌더링 자체의 성능 최적화에 주로 사용됩니다. 그래서 주로 렌더링이 자주 되는

ref는 컴포넌트에 식별가능한 유일한 이름을 붙여주는 기능이었습니다. 이 기능은 클래스형 컴포넌트에서만 사용이 가능했었는데요. useRef Hook를 사용하면, 함수형 컴포넌트에서도 ref 기능을 사용할 수 있습니다. ref가 무엇인지는 이 포스트를 참조해주세요.ref

우선 우리가 create react-app을 통해 만든 리액트 프로젝트에는 App.css라는 css파일이 존재합니다. 이 파일을 열어보면 다음과 같이 구성되어있습니다.그리고 우리가 실습을 해서 이미 사라진 App.js의 내용은 다음과 같습니다.눈치채신 분들도 계시겠지만

렌더링에 조건을 걸어서 원하는 시점에만 컴포넌트를 렌더링하게 만들 수도 있습니다. 리액트도 당연히 자바스크립트 기반 프레임워크이므로 기존 자바스크립트 조건 문법을 이용하면 됩니다.첫번째 방법은 if문을 이용한 조건부 렌더링입니다. 우리가 알고있는 if문 용법 그대로 조

우선 반복을 하기전에 자바스크립트의 Array.map()메소드에 대해 알고 넘어가야합니다. map()메소드는 배열의 요소들을 인자로 가진 함수로 가공해서 배열의 형태로 반환하는 메소드입니다. 이 함수를 꼭 기억해주세요.우선 간단하게 배열을 이용해서 컴포넌트 배열로 만들

함수형 컴포넌트로 간단한 카운터를 만들었습니다.실행해보기전에 동작을 예측해보자면, state의 count가 두 번 증가해서 결과적으로 버튼을 누르면 카운트가 2씩 증가할 것 같습니다.그럼 실행해볼까요?우선 count를 1씩 증가시키는 코드는 두 번 동작했음을 알 수 있

리액트 라우터를 알기 전에 SPA에 대해 알아야합니다. SPA에 대한 정보는 SPA 포스트를 참조해주세요.SPA를 구현하기 위해서는 라우터를 이용해야하는데, 리액트에서는 공식적으로 라우터를 지원하고 있지 않습니다. 그래서 라이브러리를 따로 설치하고 라우터를 이용해야합니

상태관리는 리액트에서 state(= 상태) 데이터를 효율적으로 관리하는 것을 말합니다. 리액트는 상태(state)의 전달을 단방향(부모 -> 자식)으로만 받기때문에 트리구조로 얽힌 컴포넌트 구조에서는 props들이 어디서부터 내려온 것인지 알기가 어렵게 됩니다.이 현상

리덕스(Redux)란 자바스크립트 상태 관리 라이브러리입니다. 상태 관리 라이브러리도 무수히 많지만 그 중에서 가장 많은 다운로드 수를 기록하고 있습니다. 앞에 소개에서 자바스크립트의 상태 관리 라이브러리라고 하는 만큼 리액트뿐만 아니라 바닐라부터 앵귤러, Vue 등

이 포스트는 Velopert 님의 리액트를 다루는 기술 개정판을 참조했습니다.지난번에 리덕스에 대해 소개를 했으니 이번에는 리덕스를 간단하게 사용해볼 차례입니다. 일반 리액트 앱에 리덕스를 이용하면 상태 관리 로직을 따로 만들고 관리가 가능해져, 프로젝트의 유지보수가

redux-actions은 action creator를 간결하게 작성할 수 있게 만들어줍니다.다음 코드는 지난 실습 때 작성한 액션과 액션 생성 함수 코드 입니다.이 코드에 redux-actions을 추가하면 객체 생성 과정 없이 간단하게 액션 생성 함수를 만들 수 있

리덕스 미들웨어는 액션과 리듀서 사이에서 동작합니다.리덕스가 적용된 앱에서, 액션이 발생하면 리듀서가 변화를 발생시킵니다. 이때 미들웨어를 추가하면, 액션이 발생하고 리듀서가 변화를 일으키기 전에 미들웨어가 동작을 하게 됩니다. 따라서 리덕스 미들웨어는 액션과 리듀서

첫 번째 소개드릴 리덕스 미들웨어은 log와 관련된 다양한 동작을 지원하는 redux-logger입니다.이 코드는 리덕스 미들웨어를 공부하기 위해 만든 코드입니다. 버튼에 따라서 글자와 색상이 변경되는 리액트-리덕스 앱입니다. 미들웨어 포스트에서 이 코드를 가지고 실습

리덕스의 또 다른 미들웨어인 redux-thunk에 대해 알아보겠습니다. redux-thunk는 가장 많이 다운로드된 리덕스 미들웨어입니다. 그 다음으로 많이 사용되는 redux-saga도 꽤 많은 다운로드 수를 보여주고 있지만 redux-thunk에 비하면 1/3가량

redux-saga 미들웨어는 Generator 문법을 사용해서 비동기 처리를 관리해줍니다. 그러므로 미들웨어를 공부하기 전에 발생자에 대한 문법과 개념을 알아두어야합니다. 발생자 문법과 설명은 발생자 포스트를 참조해주세요.redux-thunk에 이어서 또 다른 비동기

이 포스트는 Velopert님의 '리액트를 다루는 기술 개정판' 19장 코드 스플리팅 편을 참고하여 작성되었습니다.코드 스플리팅(Code Splitting)이 무엇인지에 대해서 먼저 알아보겠습니다. 리액트 카테고리에 집어넣긴 했지만, 웹팩(webpack)을 이용한 다른

styled-components는 인기있는 컴포넌트 스타일링 라이브러리입니다. 기존에 CSS를 활용하여 스타일링을 할 때는 따로 CSS 만들어서 import 시켜야했었는데요. styled-components를 이용하면 자바스크립트 파일 내부에 스타일을 정의할 수 있습니

오늘은 React Color라는 리액트 라이브러리를 하나 소개해드릴까 합니다. 진행할 프로젝트에서 이 라이브러리를 사용하기 위해 공부도 할겸 가져와봤습니다.이름에서 느껴지듯이 색과 관련된 라이브러리로, 웹 페이지 상에서 종종 우리는 색을 선택하는 경우가 있습니다. 이런

오늘은 간단한 리액트 페이지를 GitHub Pages에 배포하는 방법에 대해 알아보겠습니다. 당연하겠지만, 서버가 필요한 페이지는 따로 서버를 연결해주어야하니 여기선 다루지않겠습니다.혹시 몰라서 GitHub Pages에 대한 설명부터 짧게 하고 넘어가겠습니다. 만약 페

스토리북과 관련된 일련의 포스트들은 React를 가지고 작성되었습니다.이번에는 Storybook이라는 도구에 대해서 알아보도록 하겠습니다.Srotybook은 컴포넌트를 개발(과 관리, 변화 추적 등)하는데 도움을 주는 오픈 소스 툴입니다. 처음엔 React 개발을 위해

예전에 CSS와 자바스크립트를 이용해서 모달창을 구현했습니다. 마찬가지로 리액트로도 모달창을 구현할 수 있는데요. 바닐라 자바스크립트와는 조금 다르기에 방법을 소개해보려고 합니다. 제가 소개드린 방식으로도 리액트 환경에서 모달을 구현할 수 있습니다.classList 속

useReducer는 컴포넌트에 리듀서를 추가할 수 있게 만들어주는 Hook입니다.이 내용은 리액트의 상태관리(https://velog.io/@bami/React-ContextAPI리듀서를 간결하게 요약하자면, 현재의 상태와 상태 업데이트를 위해 필요한 정보인

기존에 소개드린 useState, useEffect, useCallbak, useRef, useMemo, useReducer는 리액트에서 제공하는 기본적인 Hooks였습니다. 이들만 이용해도 편리하게 리액트 앱을 개발할 수 있습니다.거기에 더해서 리액트에서는 반복되는

MUI(Material-UI)는 Material Design을 구현해놓은 라이브러리입니다. 라이브러리를 연동 후 컴포넌트를 사용하듯이 가져다 조립하면 쉽게 디자인을 할 수 있습니다.간단하게 Material Design이 뭔지 간단하게 이야기해볼까 합니다. MUI를 학습