완결

리액트 입문

프로젝트 만들기부터 라우터까지, 리액트를 처음 잡을 때 쓴 10편.

10/10

글 10편 · 2026년 9월 21일 업데이트

1[리액트 #1] 프로젝트 만들기hello react! NodeJS 가 설치되어 있다는 걸 가정하고 진행한다. react-app 패키지를 설치한다. 이 패키지를 설치하면 create-react-app 을 커맨드라인에서 사용 할 수 있다.2019년 5월 13일1분 분량조회수 22
2[리액트 #2] JSX 문법으로 랜더링 하기JSX 문법으로 랜더링 하기 리액트 에서는 html 을 jsx 형태로 랜더링 할 수 있다. 예를들어 아래와 같이 간단하게 확인 해 볼 수 있다.2019년 5월 13일1분 분량조회수 25
3[리액트 #3] props / stateprops 와 state 에 대해서 알아보자 리액트에서 props 와 state 라는 중요한 개념이 있다. 단순하게 생각해서 props 는 정의. 즉 변경 할 수 없는 값. state 는 상태. 현재 컴포넌트에 상태. 즉, 변경 할 수 있는 값이다.2019년 5월 13일1분 분량조회수 32
4[리액트 #4] 라이프사이클라이프사이클 React 에서 가장 어렵고 심오하고 힘들고 지치는 세가지를 뽑으라면 나는 Server-side rendering code splitting (feat. webpack) Life-cycle 이라고 생각한다.2019년 5월 13일1분 분량조회수 23
5[리액트 #5] Hook리액트 hook 을 사용 해 보자. 이전 포스트에 분명히 이 내용을 언급 한 적이 있다. 여기에서 조건이 있는데, state 를 사용 하려면, 함수형 컴포넌트가 아닌, class 형태의 컴포넌트를 React 를 상속받아 정의 해야한다.2019년 5월 13일1분 분량조회수 30
6[리액트 #6] import 와 exportimport 와 export 에 대해서 간단하게 알아보자 먼저 export 를 보자 지금까지 우리는 항상 import React from "react"; const App = () => <p>hello world</p>; export default A…2019년 5월 14일1분 분량조회수 24
7[리액트 #7] List 랜더링 하기list 를 랜더링 하는 방법에 대해서 알아보자 react 에서 리스트를 랜더링 하려면 먼저 아래 문법을 이해해야한다. const arr = ["사과", "포도", "토마토", "오랜지", "참외"]; const arr_close = arr.map((…2019년 5월 14일2분 분량조회수 24
8[리액트 #8] List 에 데이터 추가하기List 에 데이터를 추가하자 지난시간에 만들어 둔 리스트에 데이터를 추가 해보자. 데이터를 추가하려면 input 박스가 있어야 데이터를 넣을 수 있다.2019년 5월 14일4분 분량조회수 22
9[리액트] API 사용하기Kakao API 를 활용해서 블로그 서비스를 만들어 보자2019년 5월 19일5분 분량조회수 26
10[리액트] React router 사용하기react router 를 사용 해 보자.2019년 5월 20일3분 분량조회수 26