react 6

[React] 클래스형 컴포넌트와 함수형 컴포넌트를 알아보자 - (1) props, state

해당 게시물은 생활코딩의 이고잉님 강의를 듣고 개인적으로 정리한 내용을 담고 있습니다👩‍💻 생활코딩을 통해 리액트의 기초를 배우고, 더 심화된 벨로퍼트님의 강의를 듣는 과정에서 클래스형 컴포넌트와 함수형 컴포넌트를 아주 가볍게 배워서 좀 더 확실하게 짚고 넘어가고 싶었다. 함수형 컴포넌트는 '단순히 값을 전달 주고 받는 역할을 할 때 사용한다'라고 설명을 들었기 때문이다. 해당 설명으로는 무언가 충족이 되지 않았다. 다행히 이고잉님이 두 컴포넌트를 비교해서 구현하는 강의를 올려주셔서 쉽게 공부할 수 있었다. (내가 생각하는 이상적인 개발자의 모습을 갖춘 분😥😛.. 일면식도 없지만 항상 감사함을 느끼고 있다.) 리액트를 조금이라도 공부한 사람들은 함수형과 클래스형에 대해 아주 많이 들어봤을 것이다. 특히,..

React 2021.05.06

리액트(ReactJS) 전화번호부 만들기 (1)

해당 게시물은 인프런의 Velopert님의 유료 강의를 듣고 개인적으로 정리한 내용을 담고 있습니다👩‍💻 첫 번째, 입력받는 컴포넌트 생성 먼저 만들 컴포넌트는 PhoneForm이다. 해당 컴포넌트에서 사용자의 이름과 전화번호를 입력받는다. 우선, src 디렉토리 내부에 'components'라는 하위 디렉토리를 생성하고 그 안에 PhoneForm.js 파일을 생성한다. // src/components/PhoneForm.js import React, { Component } from 'react'; class PhoneForm extends Component { state = { name: '' } handleChange = (e) => { this.setState({ name: e.target.valu..

React 2021.05.04

리액트(ReacJS)의 컴포넌트 라이프사이클API - (2) Update API

해당 게시물은 인프런의 Velopert님의 유료 강의를 듣고 개인적으로 정리한 내용을 담고 있습니다👩‍💻 첫 번째 Mount API에 이어 Update API에 대해 알아보도록 하겠다. Props 또는 State가 변경될 때 관여하는 Update api static getDerivedStateFromProps Mount api와 같이 걸쳐져 있는 부분이다. 자세한 사항은 이전에 정리한 Mount API에서 확인할 수 있다. shouldComponentUpdate 리액트에서는 변화가 발생하는 부분만 업데이트해서 브라우저에 렌더링 할 수 있다. 따라서 렌더링 작업을 최적화하기 위해 사용하는 메소드이다. 자세한 내용은 이전에 정리한 이 곳에서 확인할 수 있다. getSnapshotBeforeUpdate ren..

React 2021.04.30

리액트(ReactJS) 성능 최적화를 해보자 - shouldComponentUpdate()

해당 게시물은 생활코딩의 이고잉님 강의를 듣고 개인적으로 정리한 내용을 담고 있습니다👩‍💻 리액트로 기능을 구현하다보면 값의 변형이 거의 없는 요소가 호출되는 불필요한 경우가 있다. 이런 경우 렌더링 성능이 떨어지게 되므로 좋지 않다. 따라서, 조건을 걸고 특정한 경우에만 호출 되도록 shouldComponentUpdate()를 사용한다. 해당 메소드는 오직 성능 최적화를 위해서만 사용한다. shouldComponentUpdate(newProps, newState) 해당 메소드의 기본값은 true이다. 조건을 통해 false로 지정하여 특정 경우에 호출되지 않도록 설정하면 된다. 우선, 위 메소드를 적용하기 전을 살펴보자 관리자 도구를 보면 홈페이지의 네비게이션 역할을 하는 TOC 컴포넌트의 렌더 함수도..

React 2021.04.25

리액트(ReactJS) 배포하기 - npm run build, npx serve -s build

해당 게시물은 생활코딩의 이고잉님 강의를 듣고 개인적으로 정리한 내용을 담고 있습니다👩‍💻 리액트 앱을 배포하기 전에 파일의 용량을 줄여주는 작업(빌드)을 수행한다. 실제 서비스할 때 파일이 용량이 무거우면 사용자 관점에서는 불편함이 생기기 때문이다. 우선, 관리자 도구의 네트워크 탭을 주목해보자 빈 캐시 및 하드 새로 고침 (=캐시 비우기 및 강력 새로고침) 버튼 클릭 후 네트워크 탭을 보면 단순 텍스트가 적힌 웹 페이지임에도 불구하고 1.7MB의 용량을 차지하고 있다. 그 이유는 create-react-app으로 개발 환경을 구축할 때 개발의 편의성을 위해 여러 가지 기능을 자동으로 추가하기 때문이다. 그래서 위와 같이 불필요한 용량을 줄이기 위해 빌드를 하는 것이다. 리액트 앱 빌드하기 npm ru..

React 2021.03.11

리액트(ReactJS) 개발환경 셋팅 - 설치부터 구축 및 실행까지

해당 게시물은 생활코딩의 이고잉님 강의를 듣고 개인적으로 정리한 내용을 담고 있습니다👩‍💻 리액트로 웹 애플리케이션을 만들기 위해서 개발환경 세팅이 필요하다. 리액트는 npm(node package manager)으로 설치되기 때문에 사전 작업으로 Node.js와 VSCode(필수 X)를 설치하도록 한다. Node.js 설치하기 본인 운영체제 환경에 맞게 설치하면 된다. 최신 버전을 다운받아도 되지만, 안정화 등의 이유로 LTS 사용을 권장한다. 설치 후 윈도우의 cmd창을 열어 npm 설치를 확인한다. npm -v 6.5.0 위와 같이 버전 정보가 출력된다면 성공적으로 설치가 된 것이다. 이후 create-react-app을 활용하여 리액트를 설치해보자 리액트 설치하기 리액트를 설치하는 방법은 두 가지..

React 2021.03.10