본문 바로가기

react

(11)
클래스형 컴포넌트 vs 함수형 컴포넌트 - Hook API 등장 전 요즘 React를 사용하는 개발자들은 함수형 컴포넌트를 많이 사용한다. 나 역시도 클래스형 컴포넌트를 작성해본 기억이 거의 없다. 그렇다면 리액트 개발자들은 클래스형 컴포넌트를 왜 만들었을까? 처음부터 함수형 컴포넌트만 사용하지? 🤔 ㅎ ㅎ 앞으로 몇 개의 글에 걸쳐서 리액트 사용법이 어떻게 발전되었는지에 정리해보려 한다. 리액트가 등장했을 초반에는 함수형 컴포넌트보다 클래스형 컴포넌트가 훨씬 더 인기를 끌었다. 왜일까? 클래스형 컴포넌트는 상태를 가질 수 있다 함수형 컴포넌트는 말 그대로 함수이다. 그리고 함수는 한번 호출되면 return과 함께 바로 종료되기 때문에 다시 호출할 수 없다. 물론 새로 호출은 가능하다. 함수 내에 변수를 선언하면서 상태를 가질 수는 있다. 하지만 이 상태의 생명주기는 함..
Next.js + React를 AWS EC2로 배포하기(1) - EC2 인스턴스 생성 이전에 CSR을 이용하는 React 어플리케이션은 AWS Cloudfront + S3를 통해 배포했다. 이번에 새롭게 SSR을 도입한 React 어플리케이션은 AWS EC2를 통해 배포해볼까 한다. 순서는 다음과 같다. 1. EC2 인스턴스 생성 2. React 어플리케이션 배포 EC2 인스턴스 생성 1. AWS EC2 로그인 후 인스턴스 시작 클릭 2. Amazone Machine Image (AMI)선택 AMI란 소프트웨어 OS, 애플리케이션 서버, 소프트웨어 환경설정 등이 포함된 템플릿(이미지)이다. (어떤 점에서 이미지라는 건지는 공부가 더 필요하다! ) 가상 머신를 운영하는 데에 필요하며, AWS EC2의 경우 AMI는 서버를 이미지 파일로 만든 것이다. 나는 Ubuntu Server 18.04..
React에 Next.js 도입하기 현재 React + Javascript로 구성된 애플리케이션에 Next.js를 도입해보려한다! 처음해보는거라 신난다 😁 1. next 설치 원래 react, react-dom, next 설치가 필요한데 이미 react, react-dom은 설치되어 있던 상황이라 추가로 next만 설치했다. $ yarn add next 2. pages/ + pages/index.js 생성 Next.js는 pages라는 폴더를 꼭 필요로 한다! 그래서 최상위 디렉토리에 pages 폴더를 만들고, 첫 화면을 보여주는 index.js를 생성했다. // pages/index.js import React from 'react'; const Index = () => { return 첫 화면; }; export default Inde..
CRA없이 React 프로젝트 구성하기 with Javascript 1. yarn 설치 yarn init 2. React 설치 yarn add react react-dom 3. Webpack 설치 yarn add -D webpack webpack-cli npx webpack init 4. Babel 설치 yarn add -D @babel/core @babel/preset-react @babel/preset-env 5. webpack.config.js 수정 devServer: { hot: true, //추가 open: true, host: "localhost", }, ... module: { rules: [ { test: /\.(js|jsx)$/i, loader: 'babel-loader', options: { presets: ['@babel/preset-react', '..
React 앱을 S3+CloudFront로 배포하기(1) - S3 Bucket 생성 지금부터 S3와 CloudFront로 React application을 배포했던 과정을 정리해볼까 한다. 순서는 다음과 같다. S3 Bucket 생성 CloudFront 설정 도메인 구입하여 설정 S3 Bucket 생성하기 1. S3 버킷 생성하기 AWS S3 console로 들어간다. 버킷 만들기로 들어가서 원하는 버킷 이름과 AWS Region을 설정하면 된다. 2. 모든 퍼블릭 액세스 차단 유지 클라우드 프론트를 통해 유저들의 접근을 허용할 예정이다. 모든 퍼블릭 액세스 차단을 유지하자. 3. 버킷 만들기 클릭 4. 생성된 버킷의 속성 탭 들어가서 정적 웹 사이트 호스팅 편집 클릭 5. 호스팅 편집하기 정적 웹 사이트 호스팅 -> 활성화 호스팅 유형 -> 정적 웹 사이트 호스팅 인덱스 문서 -> i..
Redux 리덕스란 상태 관리 라이브러리입니다. 리덕스를 사용하면, 컴포넌트 내에 상태들을 글로벌하게 관리할 수도 있고, 파일로 따로 모아서 상태를 관리하면서 더 효율적인 상태관리를 할 수 있습니다. 즉, 모든 컴포넌트들이 쉽게 하나의 상태를 공유할 수 있습니다. 개인적으로는 어떠한 상태를 읽는 컴포넌트와 상태에 변화를 주는 컴포넌트가 서로 다른데, 트리 구조상 서로 멀리 있을 때 글로벌하게 상태를 관리할 필요가 있다고 느끼는 편입니다 : ) 왜냐하면 두 컴포넌트는 서로 연결되어있지 않기 때문에, 두 컴포넌트를 연결할 수 있는 부모 컴포넌트에서 해당 상태를 가지고 있어야 하고, 이는 앱의 규모가 크고 트리의 구조가 깊다면 엄청난 props drilling을 발생시킬 수도 있기 때문입니다. Dispatch() 디스패..
State vs Props 리액트에서 컴포넌트의 상태를 관리하는 방법은 크게 2가지다. 하나는 변경할 수 있는 상태를 다루는 것이고 → state 하나는 변경할 수 없는 상태를 다루는 것이다 → props props와 state의 구분하기 전에 공통점부터 알아보자면 props와 state는 Javascript의 일반 객체이다. props와 state는 화면의 렌더링을 발생시킨다. Props(Properties) Props의 가장 큰 특징은, 부모 컴포넌트로부터 내려오는 상태라는 것이다. 따라서 props는 읽기 전용(read-only)이고, 이 특성을 위해서 리액트는 자바스크립트의 Object.freeze() 메서드를 사용하여 props를 읽기 전용 데이터로 만든다. 특정 상황에서는 props가 부모 컴포넌트로부터 안 내려오면, ..
Immutable이란? 리액트에서는 setState() 함수를 통해서만 state를 update 하는데, 이때 기존의 상태(객체)의 값을 직접 수정하면 안 된다. 즉, 리액트에서 state는 생성된 이후에 다시는 그 상태를 변경할 수 없다. 그 이유는 setState나 hook의 setter함수를 통해 상태를 변경하지 않으면 리액트는 상태의 변경을 감지하지 못해서 리렌더링을 하지 않기 때문이다. 이때 리액트에서는 상태를 immutable 하게 관리하라고 한다. 🤔 리액트의 상태가 immutable 하면 어떤 점이 좋을까요? 의도치 않게 특정 객체가 변경되면, 해당 객체를 참조하던 객체의 값이 같이 변경되는 side effect를 낮출 수 있다. 이에 따라 디버깅이 쉬워지고 프로그램 복잡도가 낮아진다. prevState와 nex..