러닝패스

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

멤버십
시리즈
⚡ 6시간이면 이런걸 할 수 있어요!
React를 다룰 때 알아야할 기초지식(react element, JSX, babel, webpack, CRA, component, props, state)을 다룹니다.
리액트 기초 훅(useState, useEffect)에 대해 다시 알아봅니다.
배운 개념을 토대로 다양한 프로젝트를 만들어봅니다(포켓몬 백과사전, 이미지 미리보기, 스크롤 인디케이터, 메모리 게임)
막연히 작성했던 React 코드를 보다 의도를 가지고 작성하게 됩니다.
학습 시간을 줄였어요!
6시간
핵심 콘텐츠만 선별했어요!
3개 콘텐츠
이 분들은 꼭 보세요.
React 입문자, 초보자
미리 알고 있어야 해요.
HTML, CSS, JavaScript
이 러닝패스가 어떠신가요?
(내 보관함에서 다시 볼 수 있어요)
stackoverflow 설문조사에 따르면 React가 2021년에 가장 많이 쓰인 web framework였다고 합니다. 바닐라 JS로 구현할 때보다 더욱 손쉽게 다양한 화면을 구현할 수 있다보니 많은 기업, 개발자분들이 사용하는데요, 그에 따라 많은 분들이 React에 입문합니다. 저도 마찬가지였구요. 그런데 어느순간부터 React 코드 작성을 할 때 확신을 가지고 한다기보다는 일단 적어보고 크롬 개발자 도구에 화면이 띄워지는지 여부로 코드 적합성을 판단하게 되더라구요. 이에 부족함을 느끼고 React 공식문서와 유튜브, 책으로 공부를 하며 기초를 다지는 시간을 가지게 되었는데요, 현업에서 1년 동안 일한 경험을 토대로 공부를 하다보니 처음 입문해서 공부할 때 보다 더 많은 것들이 눈에 들어오더라구요. 이 인사이트를 여러분과 나누고자한 결과물이 해당 러닝패스입니다. 그럼 지금부터 2년차 프론트엔드 개발자가 판단한, 리액트를 사용할 때 알아야할 기초 지식 가이드, 지금 시작하겠습니다.
PATH
페이스북에서는 Create React App(CRA)으로 리액트 프로젝트 셋팅을 편하게 할 수 있도록 돕고 있습니다. 하지만 해당 러닝패스에서 만큼은 CRA가 아닌 웹팩으로 직접 리액트 프로젝트 설정을 해보는 것은 어떨까요? 그동안 우리에게 CRA가 무엇을 해주었는지, 리액트가 왜 SPA(Single Page Application)인지, static page인지, JSX가 의미하는 것인지 등을 알게 되실 거에요.
서원석의 러닝패스
Create React App(CRA) 없이 리액트 프로젝트 설정해보기
React 기본 강좌 1-1. 리액트를 왜 쓰는가
출처: https://youtu.be/V3QsSrldHqI
React 기본 강좌 1-2. 첫 리액트 컴포넌트
출처: https://youtu.be/e-ZeEi6ABFY
React 기본 강좌 1-4. JSX와 바벨(babel)
출처: https://youtu.be/yw8JtQ6Iek8
PATH
Todo application을 useState, useEffect로 만들면서 리액트의 기초와 두 개의 훅을 공부해보며 상기할 내용은 없는지 파악해보는 것이 이 러닝패스의 목적이에요. 아무래도 useState, useEffect는 제일 많이 사용되는 hook이고 todo application도 보일러 템플릿으로 많이 만드는 만큼 쉽다고 느끼실 수 있겠지만 생각보다 우리는 useState, useEffect 그리고 todo application을 만들 때 필요한 리액트 지식에 대해 부족 할지도 몰라요. 이 간단한 프로젝트에 녹아있는 리액트 정수를 확인해볼까요?
서원석의 러닝패스
Todo application을 만들며 다시 배우는 리액트 core(feat. useState, useEffect)
Learn useState In 15 Minutes - React Hooks Explained
출처: https://youtu.be/O6P86uwfdR0
Learn useEffect In 13 Minutes
출처: https://youtu.be/0ZJgIjIuY7U
[React hooks 이해] #1편. useState, useEffect
출처: https://youtu.be/y52Av3JxNW4
서원석님의 멤버십 전용 콘텐츠에요.
지금 가입하고 큐레이터의 꿀팁을 확인하세요!
멤버십 가입하기
이미 멤버십 회원이라면 로그인하세요.
👋 다양한 인사이트를 읽어보고 계신가요?
나만의 학습 기록을 남기고, 관리하고 싶다면!
다양한 전문가의 멤버십 전용 콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고, 수익을 올리고 싶다면!
3초 회원가입/로그인으로, 런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기