#react

글 10개

[리액트] React router 사용하기

react router 를 사용 해 보자.

Kakao API 를 활용해서 블로그 서비스를 만들어 보자

List 에 데이터를 추가하자 지난시간에 만들어 둔 리스트에 데이터를 추가 해보자. 데이터를 추가하려면 input 박스가 있어야 데이터를 넣을 수 있다.

list 를 랜더링 하는 방법에 대해서 알아보자 react 에서 리스트를 랜더링 하려면 먼저 아래 문법을 이해해야한다. const arr = ["사과", "포도", "토마토", "오랜지", "참외"]; const arr_close = arr.map((…

import 와 export 에 대해서 간단하게 알아보자 먼저 export 를 보자 지금까지 우리는 항상 import React from "react"; const App = () => <p>hello world</p>; export default A…

리액트 hook 을 사용 해 보자. 이전 포스트에 분명히 이 내용을 언급 한 적이 있다. 여기에서 조건이 있는데, state 를 사용 하려면, 함수형 컴포넌트가 아닌, class 형태의 컴포넌트를 React 를 상속받아 정의 해야한다.

라이프사이클 React 에서 가장 어렵고 심오하고 힘들고 지치는 세가지를 뽑으라면 나는 Server-side rendering code splitting (feat. webpack) Life-cycle 이라고 생각한다.

props 와 state 에 대해서 알아보자 리액트에서 props 와 state 라는 중요한 개념이 있다. 단순하게 생각해서 props 는 정의. 즉 변경 할 수 없는 값. state 는 상태. 현재 컴포넌트에 상태. 즉, 변경 할 수 있는 값이다.

JSX 문법으로 랜더링 하기 리액트 에서는 html 을 jsx 형태로 랜더링 할 수 있다. 예를들어 아래와 같이 간단하게 확인 해 볼 수 있다.

hello react! NodeJS 가 설치되어 있다는 걸 가정하고 진행한다. react-app 패키지를 설치한다. 이 패키지를 설치하면 create-react-app 을 커맨드라인에서 사용 할 수 있다.