리액트 기초 제대로 돌아보기

멤버십

시리즈

⚡ 3개의 콘텐츠로 6시간이면 이런걸 할 수 있어요!

•

React를 다룰 때 알아야할 기초지식(react element, JSX, babel, webpack, CRA, component, props, state)을 다룹니다.

•

리액트 기초 훅(useState, useEffect)에 대해 다시 알아봅니다.

•

배운 개념을 토대로 다양한 프로젝트를 만들어봅니다(포켓몬 백과사전, 이미지 미리보기, 스크롤 인디케이터, 메모리 게임)

•

막연히 작성했던 React 코드를 보다 의도를 가지고 작성하게 됩니다.

이 분들은 꼭 보세요.

React 입문자, 초보자

미리 알고 있어야 해요.

HTML, CSS, JavaScript

stackoverflow 설문조사에 따르면 React가 2021년에 가장 많이 쓰인 web framework였다고 합니다. 바닐라 JS로 구현할 때보다 더욱 손쉽게 다양한 화면을 구현할 수 있다보니 많은 기업, 개발자분들이 사용하는데요, 그에 따라 많은 분들이 React에 입문합니다. 저도 마찬가지였구요. 그런데 어느순간부터 React 코드 작성을 할 때 확신을 가지고 한다기보다는 일단 적어보고 크롬 개발자 도구에 화면이 띄워지는지 여부로 코드 적합성을 판단하게 되더라구요. 이에 부족함을 느끼고 React 공식문서와 유튜브, 책으로 공부를 하며 기초를 다지는 시간을 가지게 되었는데요, 현업에서 1년 동안 일한 경험을 토대로 공부를 하다보니 처음 입문해서 공부할 때 보다 더 많은 것들이 눈에 들어오더라구요. 이 인사이트를 여러분과 나누고자한 결과물이 해당 러닝패스입니다.

그럼 지금부터 2년차 프론트엔드 개발자가 판단한, 리액트를 사용할 때 알아야할 기초 지식 가이드, 지금 시작하겠습니다.

큐레이터의 러닝패스 소개

페이스북에서는 Create React App(CRA)으로 리액트 프로젝트 셋팅을 편하게 할 수 있도록 돕고 있습니다. 하지만 해당 러닝패스에서 만큼은 CRA가 아닌 웹팩으로 직접 리액트 프로젝트 설정을 해보는 것은 어떨까요? 그동안 우리에게 CRA가 무엇을 해주었는지, 리액트가 왜 SPA(Single Page Application)인지, static page인지, JSX가 의미하는 것인지 등을 알게 되실 거에요.

서원석의 러닝패스

Create React App(CRA) 없이 리액트 프로젝트 설정해보기

큐레이터의 러닝패스 소개

Todo application을 useState, useEffect로 만들면서 리액트의 기초와 두 개의 훅을 공부해보며 상기할 내용은 없는지 파악해보는 것이 이 러닝패스의 목적이에요. 아무래도 useState, useEffect는 제일 많이 사용되는 hook이고 todo application도 보일러 템플릿으로 많이 만드는 만큼 쉽다고 느끼실 수 있겠지만 생각보다 우리는 useState, useEffect 그리고 todo application을 만들 때 필요한 리액트 지식에 대해 부족 할지도 몰라요. 이 간단한 프로젝트에 녹아있는 리액트 정수를 확인해볼까요?

서원석의 러닝패스