개발 블로그

리액트 컴포넌트 작성 방식에는 클래스형 컴포넌트와 함수형 컴포넌트가 있는데 Hooks는 함수형 컴포넌트 작성 방식이 되겠다. 기존의 리액트 함수형은 state와 라이프 사이클을 구현할 수 없어 아주 간단한 기능만을 수행했었는데, Hooks가 등장하게 되면서 클래스형처럼 state와 라이프 사이클 구현이 가능하게 되었다. hooks에서는 state가 바뀌면 함수가 통째로 재실행되기 때문에 조금 느릴 수 있다. useState useState는 class의 state와 동일하게 초기값을 지정해줄 수 있다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 function App() { const [funcShow, setFuncShow] = useState(true); cons..

컴포넌트는 다음과 같이 생명주기를 가지고 있다. 1. componentDidMount: 컴포넌트가 최초로 렌더링 된 후 호출되는 함수(생성) componentDidMount는 render가 되고 나서 실행된다. componentDidMount는 주로 비동기 요청을 할 때 사용한다. 컴포넌트가 생성되면 아래와 같이 차례로 실행된다. 1) constructor: 클래스가 생성될 때 호출되는 생성자 함수 2) render: 화면에 컴포넌트를 표시하는 함수 3) componentDidMount: render가 되고 나서 실행되는 함수 2. shouldComponentUpdate: 조건에 따라 렌더링을 막을 수 있는 함수, 성능 최적화에 유용 true이면 렌더링 되고 false이면 렌더링이 되지 않는다. 3. c..

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 render() { const { isLoading, movies } = this.state; return ( {isLoading ? ( Loading... ) : ( {movies.map((movie) => ( ))} )} ); } Colored by Color Scripter cs map 아래 코드는 movies라는 배열 안을 돌면서 Movie라는 컴포넌트를 생성하며 이 컴포넌트의 props 값으로 배열의 요소를 넣어주고 있다. 1 2 3 4 5 6 7 8 9 10 11 12 13 {movies.map((movie) => ( ))} Colored by Color Scripter ..

1 2 import React, { Component } from 'react'; import Subject from './components/Subject'; cs 리액트 프로젝트를 시작하기 전에는 반드시 파일의 맨 위에 react를 import 하도록 한다. 다른 파일을 현재 파일로 가져올 때도 Subject와 같이 import 한다. props 1 2 3 4 5 6 7 8 9 10 11 12 13 14 render() { return ( { this.setState({ mode: 'welcome' }); }} > ); } Colored by Color Scripter cs 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용한다. 컴포넌트 내부의 immutable data (변경되지 않는 데이..

리액트는 UI를 만들기 위한 자바스크립트 라이브러리이다. 리액트에서는 JSX를 이용한다. JSX는 자바스크립트를 확장한 문법으로 자바스크립트 안의 HTML이다. (HTML+JS) 생긴 것은 HTML과 비슷하지만 HTML이 아니라는 점을 유의해야한다. 1 2 3 4 {this.state.count} {/*주석입니다.*/} cs Line 1: 항상 div 태그 안에 코드를 작성해야 한다. Line 2: 자바스크립트를 표현하려면 중괄호 안에 변수를 넣어준다. Line 3: 주석을 사용할 때에는 {/* ... */} 형식으로 쓴다. 주석도 div 안에 위치해야 오류가 나지 않는다.

프로젝트가 완성되었다면 github pages로 배포한다. 아래 절차를 따른다. 1. npm install gh-pages 를 실행한다. 2. package.json 파일에서 homepage와 predeploy, deploy를 설정하고 저장한다. -homepage는 프로젝트 url이 되며 아래 형식에 맞춘다. -predeploy와 deploy는 scripts에 추가한다. predeploy는 프로젝트를 빌드하여 빌드 폴더를 만들고, deploy에서 실제 배포가 일어난다. 1 2 3 4 5 6 7 8 "homepage": "https://깃허브 아이디.github.io/저장소 이름", "scripts": { "start": "react-scripts start", "build": "react-scripts ..

먼저 리액트 프로젝트를 하기에 앞서 아래의 절차를 통해 환경설정 및 프로젝트를 생성한다. 1. node.js를 설치 아래 node.js 홈페이지에서 LTS 버전으로 설치한다. 설치를 하면 node.js와 npm이 함께 설치된다. https://nodejs.org/en/ 2. 터미널에서 npx create-react-app 프로젝트명을 실행한다. 프로젝트명이라고 되어있는 부분은 말 그대로 프로젝트명을 적는 곳이니 본인이 원하는 이름으로 적으면 된다. 예시) npx create-react-app first-app 3. github repository를 생성한다. 내 컴퓨터에 프로젝트 폴더가 생성되었으면 깃허브 리포지토리를 생성한다. 프로젝트명과 동일하게 리포지토리를 생성한다. 4. 다음 명령어를 차례로 실행..