리액트 Remind

벨로퍼트와 함께하는 모던 리액트 #1 시작! 리액트란? 리액트는 자바스크립트 기반의 프로그램으로 2013년에 페이스북 측에서 처음으로 릴리즈되었다. 코드 에디터가 있다는 가정하에, 처음으로 리액트를 시작할려면... Node.js https://nodejs.

JSX에서 Babel이란?자바스크립트의 문법을 확장해주는 도구지원하지 않는 최신 문법이나 실험적인 자바스크립트 문법들을 자바스크립트 형태로 변환해준다.주의할 점!알다시피 태그는 꼭 닫혀야한다.예 ) 열려있는 div 태그중간에 열려있는 div 태그가 존재한다.결과는...

#3 노력의 부산물 ㄷㄷㄷ! props props는 properties에 줄임말로 우리가 어떠한 값을 컴포넌트에게 전달할 때, props를 사용한다. App.js 파일에서 name이라는 값을 전달할 때... App.js Hello.js 결과는... Hel

지금까지 공부하면서 동적인 부분은 하나도 없었다.과거에는 함수형 컴포넌트에서는 상태를 관리할 수 없었지만, 리액트 16.8에서 Hooks라는 기능이 도입되면서 새로운 패러다임을 보여주었다.useState 또한 리액트의 Hooks 하나의 기능이다.우선 가장한 예를 들어보

#5 머리에서 쥐가 난다! ㅠㅠ input 상태 관리하기 리액트에서 사용자가 입력할 수 있는 input 태그의 상태 관리법에 대해 알아보겠다. src 폴더에 InputSample.js라는 파일을 생성한다. InputSample.js 위의 컴포넌트를 App파일에

자바스크립트에서는 우리가 특정 DOM을 선택해야할 때, getElementById, querySelector 같은 DOM selector 함수를 사용해야한다.리액트에서 가끔식 DOM을 직접 선택해야 하는 상황이 올 수 있다.이 때, 리액트에서 ref라는 것을 사용한다.

#7 침대에서 벗어나기 useRef 로 컴포넌트 안의 변수 만들기 우리가 컴포넌트에서 특정 DOM을 선택할려면, ref를 사용해야한다고 배웠다. 이 때, Hook의 한 종류인 useRef을 사용해서 설정해주면 된다. useRef은 DOM을 선택하는 외에 다른 용도

이번에는 배열에 있는 항목을 제거하는 방법에 대해 알아보겠다.UserList에서 삭제 버튼을 렌더링하겠다.User 컴포넌트의 삭제 버튼이 클릭 되었을 때, user.id 값 앞으로 props로 받아올 onRemove 함수의 파라미터로 넣어서 호출해줘야 한다.여기서 on

이번에는 Hook의 또 다른 기능중에 하나인 useEffect의 대해 알아보겠다.useEffect는 함수형 컴포넌트에서 효과들을 실행할 때 쓰이며, 기존 클래스 컴포넌트의 라이프사이클 메서드들을 대체한다.LifeCycle Method - componentDidMount

#10 Hook 종류 넘 많다 ㅠㅠ useMemo의 사용방법 이번에는 성능 최적화를 위해서 연산된 값을 useMemo라는 Hook을 이용해 재사용해보겠다. App 컴포넌트에 countActiveUsers라는 함수를 만들고, active 값이 true 인 사용자의

이번에는 컴포넌트 props가 바뀌지 않았다면, 리렌더링 하는 것을 방지하여 컴포넌트의 성능 최적화를 도와주는 React.memo 함수에 대해 알아보겠다.이 함수를 사용하면, 컴포넌트에서 리렌더링이 필요한 상황만 다시 렌더링을 한다.CreateUser에 적용해보겠다.C

#12 피곤쓰 useReducer의 활용법 이해하기 전에는 상태를 관리할 때, useState를 사용해서 새로운 상태를 설정해주었다. 그런데 이 방법 말고도 다른 새로운 방법이 있다. 바로, useReducer를 사용하는 것이다. Hook 함수중 하나이며 컴포넌

우리가 컴포넌트를 만들다보면, 반복하는 로직이 자주 발생한다.특히 input을 관리하는 코드는 비슷한 것 들이 존재한다.그리하여 커스텀 Hooks를 만들어서 반복되는 로직을 쉽게 재사용하는 방법에 대해 알아보겠다.우선, src 디렉토리에 hooks 라는 디렉토를 만들어

#14 춥다 휴 :< Immer 를 사용한 더 쉬운 불변성 관리 리액트에서 배열이나 객체를 업데이트 해야 할 때 직접 수정하면 안되고 불변성을 지켜주면서 업데이트를 해줘야한다. 예 ) 객체가 있다면... 연산자를 사용해서 새로운 객체를 만들어줘야한다. 배열도

이제는 잘 사용하지 않지만, 클래스형 컴포넌트에 대해 알아보겠다.우리가 클래스형 컴포넌트를 배우는 이유는 나중에 이 형태를 사용하는 프로젝트를 유지보수 할 수 있고, 함수형 컴포넌트로 & Hooks 로 하지 못하는 작업이 2개정도 있다.예전에 만들어진 리액트 관련 라이

#16 바뀌어 버린 나 자신 LifeCycle Method LifeCycle Method 는 한국말로 "생명주기 메소드" 라고 부른다. 생명주기 메소드는 컴포넌트가 브라우저 상에 나타나고 업데이트되고 사라질 때 호출되는 메소드이다. 그리고 추가로 컴포넌트에서 에러가

저번에 이어서 오늘은 componentDidCatch 라는 생명주기 메서드를 사용해서 리액트 애플리케이션에서 발생하는 에러를 처리하는 방법을 알아보도록 하겠다.이 튜토리얼을 진행하기 앞서 새로운 프로젝트를 생성해준다.다 생성이 완료되면, 해당 디렉토리를 열고 개발 서버

#18 벌써 리액트 입문이 끝나다?! 이 시리즈를 통해서 우리는 리액트의 기본적인 것들을 대부분 배웠다. 이 정도면 리액트가 어떻게 작동하는지 충분히 이해했다고 볼 수 있다. 앞으로 남은 것들은 지금까지 배운 것들을 어떻게 활용할 지, 그리가 다른 라이브러리들과 어떻

이번에는 CSS Module 이라는 기술에 대해 알아보자!우리가 리액트 프로젝트에서 컴포넌트를 스타일링 할 때, CSS Module 이라는 기술을 사용하면, CSS 클래스가 중첩되는 것을 막을 수 있다.프로젝트에서 CSS Module 을 사용할 때, CSS 확장자 파일

#20 잠깐이나마 한 소중한 경험! styled-components 이번에는 CSS in JS 라는 기술이다. 이 문구가 뜻하는 대로, 이 기술은 JS 안에 CSS 를 작성하는 것이다. 우리는 해당 기술을 다뤄보는 라이브러리인 styled-components 를 알

#21 잘가라 내 청춘 ~ 컴포넌트 만들기 이번에는 리액트를 이용해서 밑에 있는 투두리스트를 만들어보겠다. 출처 : 벨로퍼트와 함께하는 모던 리액트 투두리스트의 기능을 구현하기 전에, 우리 프로젝트에서 필요한 모든 컴포넌트들의 UI 를 미리 만들어보겠다. 새로

우리가 만든 투두리스트 애플리케이션에서 상태 관리를 진행한다면 다음과 같은 구조로 구현 할 수 있다.출처 : 벨로퍼트와 함께하는 모던 리액트App 에서 todos 상태와, onToggle, onRemove, onCreate 함수를 지니고 있게 한 다음, 해당 값들의 p

우리는 Context 를 만들었으니, 이제 Context 와 연동을 하여 기능을 구현해보자!Context 에 있는 state 를 받아와서 렌더링을 하고, 필요한 상황에는 특정 액션을 dispatch 하면 된다.TodoHead 에서는 done 값이 false 인 항목들의

이번에는 리액트 애플리케이션에서 애플리케이션에서 API 를 연동하는 방법을 배우게 될 것이다.우리가 앱 애플리케이션을 만들면 데이터를 브라우저에서만 들고 있는게 아니라, 데이터를 보존시키고 다른 사람들도 조회 할 수 있게 하려면 서버를 만들고 서버의 API 를 사용해서

우리는 데이터를 요청해야 할 때마다 리듀서를 작성하는 매우 번거로운 일이다. 매번 반복되는 코드를 작성하는 대신에, 커스텀 Hook 을 만들어서 요청 상태 관리 로직을 쉽게 재사용하는 방법에 알아보자!우선, src 디렉토리에 useAsync.js 파일을 생성하고, 다음

이번에는 react-async 라는 것을 배울건데 지난번에 만들었던 useAsync 와 비슷한 함수가 들어있는 라이브러리이다.이 라이브러리 안에 들어있는 함수 이름도 useAsync 인데, 약간 사용법이 다르다.매번 프로젝트마다 요청 상태 관리를 위한 커스텀 Hook

이번에는 리액트의 Context 와 API 연동을 함께하는 방법에 대해 알아보도록 하겠다.컴포넌트에서 필요한 외부 데이터들은 컴포넌트 내부에서 useAsync 같은 Hook 을 사용해서 작업을 해도 충분하지만, 가끔씩 특정 데이터들은 다양한 컴포넌트에서 필요하게 될 때

#28 새로운 환경에 적응하기 react-router 를 이용한 리액트 싱글 페이지 애플리케이션 만들기 SPA 란? Single Page Application (싱글 페이지 어플리케이션) 의 약자이다. 말 그대로, 1개인 어플리케이션이란 뜻을 의미한다. 전통적인

#29 유연한 사고를 갖자! 서브라우트 서브라우트, 즉 라우트 내부의 라어트를 만드는 것을 의미한다. > 이 작업은 복잡하지 않아서 그냥 컴포넌트를 만들어서 그 안에 또 Route 컴포넌트를 렌더링하면 된다. ※ 서브 라우트 만들어보기 우선 src 에 Prof

#30 다양한 사람들과 만나보자! 리덕스에서 사용되는 키워드 숙지하기

리덕스를 프로젝트에 사용하기 전에, 꼭 알아야 할 3가지 규칙!하나의 애플리케이션에서는 단 한개의 스토어를 만들어서 사용해야한다.여러개의 스토어를 사용해도 되지만, 상태 관리가 복잡해져 가급적이면 권장하지 않는다.(예외로 특정 업데이트가 너무 많거나, 애플리케이션의 특

#32 리덕스 재입문! 리덕스(Redux) 코딩 > 그동안 벨로퍼트님의 자료를 통해 공부했었는데, 리덕스는 새롭게 업데이트가 필요한 시점이라 유튜브 영상들을 통해서 요약해보겠다. Facts 정리 리덕스는 useState 처럼 컴포넌트 내부에서만 사용되는게 아니라