study/react (2021 여름방학)

코드 스플리팅 웹팩이라는 도구는 프로젝트를 빌드할 때 별도의 설정을 하지 않으면 프로젝트에서 사용중인 모든 js파일이 하나로 합쳐지고, 모든 CSS 파일도 하나의 파일로 합쳐진다. 이러면 애플리케이션의 규모가 커지면 지금 당장 필요하지 않은 컴포넌트 정보까지 모두 불러오면서 파일의 크기가 커진다!! -> 로딩이 오래 걸리기 때문에 트래픽이 많이 나온다. 이 문제를 해결해줄 수 있는 방법이 코드 비동기 로딩이다!! 이 방법은 코드 스플리팅(파일을 분리하는 작업) 중 하나이다. 코드 비동기 로딩을 통해 자바스크립트 함수, 객체,혹은 컴포넌트를 처음에는 불러오지 않고 필요한 시점에 불러와서 사용할 수 있다!!! Loadable Components는 코드 스플리팅을 편하게 하도록 도와주는 서드파티 라이브러리이다..

리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리라고 한다!!! 리덕스 키워드 개념 액션 상태에 어떤 변화가 필요하면 액션이 발생한다. 얘는 하나의 객체로 표현되는데 다음과 같은 형식으로 이루어져 있다!! { type: 'TOGGLE_VALUE' } 액션 객체는 type 필드를 반드시 가지고 있어야 한다. 이 값을 액션의 이름이라고 생각하면 된다!!! 그리고 그 외의 값들은 나중에 상태 업데이트를 할 때 참고해야 할 값이며, 작성자 마음대로 넣을 수 있다!! { type: 'ADD_TODO', data: { id: 1, text: '리덕스 배우기' } } { type: 'CHANGE_INPUT', text: '안녕하세요' } 대충 이런식으로!! 액션 생성 함수 액션 생성 함수(action crea..

SPA SPA는 Single Page Application의 약어, 말 그대로 한 개의 페이지로 이루어진 애플리케이션이다!! 리액트 같은 친구들은 새로운 화면을 보여줘야 할 때 마다 서버측에서 모든 뷰를 준비하는게 아니라 뷰 렌더링을 사용자의 브라우저가 담당하게 하고 애플리케이션을 브라우저에 불러와 실행시킨 후에 필요한 부분만 업데이트 한다!!! 싱글 페이지라고 해서 화면이 한 종류가 아니라 서버에서 사용자에게 제공하는 페이지가 한 종류이고, 해당 페이지에서 로딩된 자바스크립트와 현재 사용자 브라우저의 주소 상태에 따라 다양한 화면을 보여줄 수 있다!!! 다른 주소에 다른 화면을 보여주는 것을 라우팅이라고 한다!! 리액트 라우팅 라이브러리중 리액트 라우터를 이용해보자!! 리액트 라우터 프로젝트를 생성하고..

Hooks class형 컴포넌트에는 state와 라이프사이클이 있었는데 함수형 컴포넌트에는 이 기능이 없었다!!! 그래서 다른건 함수형 컴포넌트를 사용하다가도 state관리를 해야하면 class형 컴포넌트를 사용하는 불편함이 있었다. Hooks는 리액트 v16.8에 새로 도입된 기능으로 이 hooks덕분에 함수형 컴포넌트에서도 state를 관리할 수 있게 되었다!! 그래서 이 Hook을 사용한 버튼을 누를때 마다 클릭 횟수를 증가시키는 코드를 보면 (react 공식 문서에 나와있는 코드) import React, { useState } from 'react'; function Example() { // 새로운 state 변수를 선언하고, count라 부르겠습니다. const [count, setCount..

라이프사이클 메서드 라이프사이클 메서드의 종류는 총 아홉가지이다. Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드이고, Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행되는 메서드이다. 라이프 사이클은 총 세 가지 마운트, 업데이트, 언마운트 카테고리로 나눈다!! 마운트 DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트(mount)라고 한다. 이때 호출하는 메서드는 다음과 같다. 컴포넌트 만들기 -> constructor -> getDerivedStateFromProps -> render ->componentDidMount constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드 getDerivedStateFromProps: props..

import React from 'react'; const IterationSample = () => { return ( 눈사람 얼음 눈 바람 ) }; export default IterationSample; IterationSample.js 라는 파일을 작성했다!! 이 코드를 보면 이 형태가 계속 반복되는 것을 볼 수 있다. 지금은 li태그 하나뿐이라 괜찮은데 좀 더 코드가 복잡해지면 코드양도 늘어나고 파일 용량도 증가한다!! 그래서 이번에는 리액트 프로젝트에서 반복적인 내용을 효율적으로 보여주고 관리하는 방법을 알아보자!!! 자바스크립트 배열의 map() 함수 자바스크립트 배열 객체의 내장 함수인 map 함수를 사용하여 반복되는 커모넌트를 렌더링할 수 있다!! map 함수는 파라미터로 전달된 함수를 ..

HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 있다!! 이게 바로 ref(reference) 개념이다!! DOM을 직접적으로 건드려야 할 때 ref를 사용해야한다. DOM 이란 Document Object Model의 약자로 문서 객체 모델이라고 번역할 수 있다. 이나 같은 html 문서의 태그들을 javascript가 이용할 수 있는 객체로 만들면 그것을 객체 문서라고 한다. 그러니까 웹 브라우저가 html 페이지를 인식하는 방식을 DOM이라고 하는데 개발자 도구에서 F12를 눌러서 볼 수 있는 친구들이 바로 DOM이다!! src 디렉토리 안에 ValidationSample.css, ValidationSample.js 파일을 만들었다. V..

사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트라고 한다!! 리액트에서 이벤트 다루는 법을 알아보자!! EventPractice.js 라는 새 컴포넌트를 만들었다!! import React, { Component } from 'react'; class EventPractice extends Component { render() { return ( 이벤트 연습 { console.log(e) } } /> ) } } export default EventPractice; App.js에 EventPractice를 렌더링 해주는거 잊지말고!!! import React from "react"; import './App.css'; import EventPractice from "./EventPrac..

저번 게시글에서 짧게 언급만 하고 넘어간 props와 state!!! 를 좀 더 자세히 알아보자!!! props props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다!!! MyComponent라는 컴포넌트를 하나 만들어서 이 컴포넌트에 name이라는 props를 렌더링하도록 설정해보자!! import React from 'react'; const MyComponent = props => { return 안녕하세요, 제 이름은 {props.name}입니다. }; export default MyComponent; 이러면 이제 이 컴포넌트를 사용할 부모 컴포넌트에서 이 props값을 설정..

1. 리액트 Angular, Backbone.js, Derby.js ... 등 많은 자바스크립트 프레임워크들은 주로 MVC(Model - View - Controller) 아키텍쳐, MVVM(Model - View - View Model) 아키텍처를 사용한다. 이런 구조의 공통점은 모델(Model)과 뷰(View)가 있다는 것이다!! 모델은 애플리케이션에서 사용하는 데이터를 관리하는 영역, 뷰는 사용자에게 보이는 부분이다. 프록램이 사용자에게 어떤 작업(ex 버튼 클릭, 텍스트 입력 등)을 받으면 컨트롤러는 모델 데이터를 조회하거나 수정하고, 변경된 사항을 뷰에 반영한다. 모델에 있는 값이 변한다 -> 뷰에서도 이를 변화시켜준다. 즉, 일단 첫 화면을 보여주고 변화에 따라 필요한 곳을 바꿔준다. 이 변화..