📋 Micro Frontend Micro Frontend 란 백엔드에서 사용하고 있는 마이크로 서비스 아키텍쳐처럼 프론트엔드에서 관리하는 서비스를 분리해서 개발, 관리하는 패턴을 말합니다. Micro Service 처럼 전체 화면을 작동할 수 있는 단위로 나누어 개발한 후 서로 조립하는 방식입니다. 📝 Micro Frontend 장점 작고, 응집력 있고 유지보수에 용이한 코드베이스를 가질 수 있습니다. 각 Micro Frontend는 고유한 기술 및 프레임 워크를 선택할 수 있습니다. 프론트엔드 개발을 점진적 업그레이드 또는 재작성이 수월해집니다. 분리 배포가 용이하고, 자율적인 팀 조직운영이 수월해집니다. 📝 Micro Frontend 단점 배포 번들 사이즈가 커질 수 있습니다. 서로 간의 개발 환경의..
📝 Routing 웹 애플리케이션에서 라우팅이라는 개념은 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것을 의미합니다. 웹 애플리케이션을 만들 때 프로젝트를 하나의 페이지로 구성할 수도 있고, 여러 페이지로 구성할 수 있습니다. 여러 페이지로 구성된 웹 애플리케이션을 만들 때 페이지 별로 컴포넌트들을 분리해가면서 프로젝트를 관리하기 위해 필요한 것이 라우팅 시스템 입니다. 리액트에서 라우트 시스템을 구축하기 위해 사용할 수 있는 선택지는 크게 두 가지가 있습니다. React-Router 이 라이브러리는 리액트의 라우팅 관련 라이브러리들 중에서 가장 오래됐고, 가장 많이 사용하고 있습니다. 컴포넌트 기반으로 라우팅 시스템을 설정할 수 있습니다. Next.js 리액트 프로젝트의 프레임워크입니다. ..
📝 useEffect useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정하는 Hook입니다. 클래스형 컴포넌트의 componentDidMount와 componentDidUpdate를 합친 형태로 보아도 무방합니다. 📜 useEffect 활용 import { useState, useEffect } from 'react'; const Info = () => { let [name, setName] = useState(''); let [nickName, setNickName] = useState(''); useEffect(() => { console.log('렌더링 완료'); console.log({ name, nickName }); }); const onChangeName = (..
📝 useState 리액트 컴포넌트에서 동적인 값을 상태(state)라고 부릅니다. 사용자 인터렉션을 통해 컴포넌트의 상태값이 동적으로 바뀔 경우에는 상태를 관리하는 것이 필요합니다. useState는 가장 기본적인 Hook이며, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해 줍니다. 📜 useState 활용 import { useState } from 'react'; const Counter = () => { let [count, setCount] = useState(0); return( { count } {setCount(count + 1)}}>+1 {setCount(count - 1)}}>-1 ) }; export default Counter; useState는 상단에 import 구문을 ..
📝 모든 React Component에는 Lifecycle(수명 주기)이 존재합니다. Component의 수명은 페이지에 렌더링되기 전 준비 과정에서 시작하여 페이지에서 사라질 때 끝납니다. 라이프 사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있습니다. 라이프 사이클 메서드의 종류는 총 아홉 가지입니다. Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드이고, Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행되는 메서드입니다. 라이프 사이클은 총 세가지, Mount, Update, Unmount 로 나눕니다. 📜 Mount DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트(Mount)라고 합니다. 이때 호출하는 메서드는 다음과 같습니다. constructor ..
📝 ref HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 React프로젝트 내부에서 DOM에 이름을 다는 방법이 ref(reference) 개념입니다. 🔎 함수형 컴포넌트에서 ref를 사용하려면 Hooks를 사용해야 하기 때문에 Class형 컴포넌트 먼저 알아보겠습니다. 📜 ref는 어떤 상황에서 사용해야 할까 React에서 state로만 해결할 수 없고, DOM을 반드시 직접 건드려야 할 때 사용하게 됩니다. ex) 특정 input에 focus주기, scroll box 조작, canvas 요소에 그림 그리기 등 📜 Class형 컴포넌트 - 콜백 함수를 통한 ref 설정하기 ref를 만드는 가장 기본적인 방법은 콜백 함수를 사용하는 것입니다. ref를 달고자 하는 요소에 ref라는 콜백 함수를..
📝 state state는 Component 내부에서 바뀔 수 있는 값을 의미합니다. props는 Component가 사용되는 과정에서 부모Component가 설정하는 값이며, component 자신은 해당 props를 읽기 전용으로만 사용할 수 있습니다. props를 바꾸려면 부모 Componenet에서 바꾸어 주어야합니다. React에는 두 가지 state가 있습니다. 하나는 class형 Component가 지니고 있는 state이고, 다른 하나는 함수형 Component가 지니고 있는 useState라는 함수를 통해 사용하는 state입니다. 📜 class형 Component의 state - Component에 state를 설정할 때는 constructor 메서드를 작성하여 설정합니다. constu..
📝 Props props는 properties의 줄인 표현으로 Component 속성을 설정할 때 사용하는 요소 입니다. props 값은 해당 Component를 불러와 사용하는 부모 Component에서 설정할 수 있습니다. 📜 JSX 내부에서 props 렌더링 props 값은 Component 함수의 파라미터로 받아 와서 사용할 수 있습니다. props를 렌더링할 때는 JSX내부에서 { } 기호로 감싸주면 됩니다. const MyComponent = props => { return Hi, My name is { props.name }!!; }; export default MyComopnent; 📜 Component 사용할 때 pops 값 지정 불러온 Component 내부에 props 값을 지정할 수..
📝 Component 리액트를 사용하여 애플리케이션의 인터페이스를 설계할 때 사용자가 볼 수 있는 요소는 여러 가지 Component로 구성되어 있습니다. Component의 기능은 단순한 템플릿이 아닌 데이터가 주어졌을 때 이에 맞추어 UI를 만들어 주고 라이프사이클 API를 이용하여 Component가 화면에서 나타나고 사라질 때, 변화가 일어날 때 주어진 작업들을 처리할 수 있으며, 임의 메서드를 만들어 특별한 기능을 붙여줄 수 있습니다. 📜 class형 Component 클래스형 Component에서는 render 함수가 꼭 있어야 하고, 그 안에서 보여 주어야 할 JSX를 반환해야 합니다. import { Component } from 'react'; class App extands Compon..
