맨동이

Component Lifecycle 이번에는 16.3 버전 이상의 변경된 내용에 대해 살펴보겠습니다. 라이프사이클 변경 사항(v16.3 이상) constructor componentWillMount => getDerivedStateFromProps render componentDidMount componentWillReceiveProps => getDerivedStateFromProps shouldComponentUpdate render componentWillUpdate => getSnapshotBeforeUpdate DOM에 적용 componentDidUpdate componentWillUnmount 1. getDerivedStateFromProps getDerivedStateFromProps는 최초..

Component Lifecycle 해당 내용은 16.3 버전 이전의 내용을 다루고 있습니다. 라이프사이클 (v16.3 이전) 1. Component 생성 및 마운트 constructor componentWillMount render(최초 렌더) componentDidMount 1.1 코드 예시 class App extends React.Component { state = { age: 25, }; constructor(props) { super(props); console.log("constructor", props); } render() { console.log("render"); return ( Hello {this.props.name} - {this.state.age} ); } componentWi..

React Router로 라우팅 하기 SPA는 index.html 파일에 div 엘리먼트만 하나 두고, 자바스크립트로 모든 부분을 동적으로 랜더링하는 구조입니다. 그리고 화면의 전체 또는 일부를 브라우저에서 발생하는 이벤트에 따라서 동적으로 갱신할 수 있기 때문에 인터랙티브 한 사용자 경험을 제공할 수 있습니다. 별도의 라이브러리 없이 React로 간단하게 라우팅을 구현할 수 있습니다. 예를 들어, 다음 코드 처럼 현재 어떤 컴포넌트가 랜더링되야 하는지 상태로 관리할 수 있습니다. 내의 특정 메뉴 버튼을 클릭하면 상응하는 컴포넌트로 comp 상태가 바뀌기 때문에 화면에서 부분이 갱신되게 됩니다. import React, { useState } from "react"; import Home from "./..

JSX란? 1. 특징 JSX는 JavaScript의 XML입니다. JavaScript 문법의 확장판으로 리액트에서 요소를 제공합니다. 컴파일에 최적화 확장자는 jsx 또는 js 컴파일 과정이 필요하므로 변환 과정에서 오류가 있다면 빌드 시 오류 발생 2. 사용 이유 1. React.createElement와 JSX를 비교하였을 때, JSX의 가독성이 훨씬 뛰어납니다. 2. Babel과 같은 컴파일 과정에서 문법적인 오류를 인지하기 쉽습니다. 3. 변환 과정 JSX의 문법으로 작성된 코드는 순수한 JavaScript로 컴파일하여 사용할 수 있습니다. 이를 가능하도록 하는 것이 바로 Babel입니다. 4. 사용 방법 4.1 CDN CDN을 통해, 별도의 설치 없이 Babel 사용이 가능합니다. 4.2 작성법..

1. Props, State Props는 컴포넌트 외부에서 컴포넌트에게 주는 데이터이고, State는 컴포넌트 내부에서 변경할 수 있는 데이터입니다. 둘 중 하나라도 변경되면 렌더링이 일어납니다. render 함수는 Props와 State를 바탕으로 컴포넌트를 그립니다. 그리고 Props와 State가 변경이 되면, 컴포넌트를 다시 그리게 됩니다. 컴포넌트를 그리는 방법을 기술하는 함수가 바로 render 함수입니다. 2. Props 2.1 Props 사용 예제 (1) // {message: 'Hello!!!'} function Component(props) { return ( {props.message} ); } ReactDOM.render( , document.querySelector('#root')..

과거의 웹 사이트 전통적인 웹 사이트는 지금보다 문서 하나에 전달되는 파일의 용량이 적었습니다. 그래서 어떤 요소를 한번 클릭하면 완전히 새로운 페이지를 서버에서 전송해 주곤 했습니다. 그러나 현대에 이르러 점차 웹 사이트가 고도화됨에 따라 한 페이지에 해당하는 페이지 용량이 커져갔고, 매번 새로운 페이지를 전달하는 게 점점 버거워지게 되었습니다. SPA란 ? 이러한 문제를 해결하기 위해 등장한 것이 SPA(Single Page Application)입니다. 어떤 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 것이 SPA입니다. 뭔가를 클릭하거나 스크롤하면, 상호작용하기 위한 최소한의 요소만 변경이 일어나게 해줍니다. 페이지 변경이 일어난다고 보여지는 것 또한 최초 로..

async & await란? async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법입니다. 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와줍니다. async & await 기본 문법 async function 함수명() { await 비동기_처리_메서드_명(); } 함수의 앞에 async 라는 예약어를 붙입니다. 그러고 나서 함수의 내부 로직 중 HTTP 통신을 하는 비동기 처리 코드 앞에 await를 붙입니다. 여기서 주의하셔야 할 점은 비동기 처리 메서드가 꼭 프로미스 객체를 반환해야 await가 의도한 대로 동작합니다. 일반적으로 await의 대상이 되는 비동기 처리 코드는 Axios 등 프로미스를 반환하..

Promise란? 프로미스는 자바스크립트 비동기 처리에 사용되는 객체입니다. 자바스크립트의 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미합니다. Promise의 필요성 프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용합니다. 일반적으로 웹 애플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 API를 사용합니다. API가 실행되면 서버에다가 데이터를 보내달라는 요청을 보냅니다. 그런데 데이터를 받아오기 전에 데이터를 화면에 데이터를 표시하려고 하면 오류가 발생하거나 빈 화면이 뜨는데, 이와 같은 문제점을 해결하기 위한 방법 중 하나가 프로미스입니다. 프로미스 코드 - 기초 그럼 프로미스가 어떻게 동작하는지..

컴포지션 API - props, context 1. 전달인자 setup 펑션은 2가지 전달인자를 가집니다 props context 1.1 Props setup 펑션의 첫번째 전달인자는 props입니다. 표준 컴포넌트에서 예상하는 것처럼 setup 내부의 props는 반응성이 있고, 새로운 props가 전달되면 업데이트됩니다. 1.2 Context setup펑션의 두번째 전달인자는 context입니다. context는 3가지 컴포넌트 프로퍼티를 가지는 일반 JavaScript 객체입니다. 2. 컴포넌트 속성에 접근하기 setup이 실행될 때, 컴포넌트 인스턴스는 아직 생성되지 않았습니다. 결과적으로 아래와 같은 속성에만 접근할 수 있습니다. props attrs slots emit 즉, 다음 컴포넌트 옵션..

1. 컴포지션 API의 필요성 //App.vue {{ count }} / {{ doubleCount }} {{ message }} / {{ reversedMessage }} message와 관련된 코드, 그리고 count와 관련된 코드가 나뉘어 작성을 하게 되며 코드가 동작하는 로직을 이해하기 위해서 관련 코드의 옵션 블록을 지속적으로 점프해야합니다. 코드를 이해하기 위해 관련 옵션들을 위, 아래로 이동(스크롤)하여 코드를 보는 행동을 점프라고 표현합니다. 논리적인 관점 단위로 개발을 하려고 해도 이 옵션의 규칙을 지켜야하고 더 많은 논리 주제가 추가될 수록 코드의 양이 많아져 가독성이 떨어지고 유지보수성이 낮아집니다. 그렇다면 동일한 논리적 관심사와 관련있는 코드를 함께 배치할 수 있다면 더 좋을 것입..