React

리액트의 탄생 리액트는 복잡한 웹 서비스를 쉽고 빠르게 개발할 수 있는 Node.js의 라이브러리 가운데 하나입니다. 페이스북 개발팀은 서비스의 변화가 많고 사용자와 상호작용이 원활한 대규모 웹 애플리케이션을 쉽게 구축할 수 있는 기술이 필요했고, 이를 만든 것이 리

쉽고 간단한 업데이트🦔 업데이트란? 업데이트란 웹 페이지의 정보를 교체하는 일입니다. 업데이트의 좋은 예로 인스타그램의 '좋아요' 기능이 있습니다. 웹에서 페이지를 업데이트하려면 문서 객체 모델(Document Object Model, DOM)을 조작해야 합니다.

Intro🦔 리액트 앱은 리액트로 만든 웹 서비스입니다. 웹이 아닌 앱으로 부르는 이유는 마치 애플리케이션처럼 다양하게 상호작용할 수 있는 기능을 제공하기 때문입니다. > ## Create React App으로 리액트 앱 만들기 ✔️ 폴더 만들기 폴더명은 소문자

리액트 앱에는 어떻게 접속하는 걸까? 😺 방법 Create React App으로 만든 리액트 앱에는 웹 서버가 내장되어 있습니다. 즉, npm run start 명령을 실행하면 브라우저가 리액트 앱에 접속하도록 앱에 내장된 웹 서버가 동작합니다. localhost

Intro 🐭 개발자들은 리액트를 컴포넌트 기반의 UI 라이브러리라고 소개합니다. 페이지의 모든 요소를 컴포넌트 단위로 쪼개어 개발하고, 완성된 컴포넌트를ㄹ 마치 레고 조립하듯이 하나로 합쳐 페이지를 구성하기 때문입니다. > ## 실습 환경 설정하기 (❁´◡`❁)

컴포넌트의 계층 구조 ✨ 지난 글에서 App에서 Header1, Header2 컴포넌트를 자식으로 배치했더니 페이지에 Header를 렌더링했습니다. 이 원리를 파악하기 위해서는 index.js코드를 살펴보아야 합니다. 코드를 살펴보면 페이지에 헨더링하는 컴포넌트는

JSX란? 🌰 자바스크립트와 HTML 태그를 섞어 사용하는 문법을 JSX(자바스크립트 XML)라고 합니다. JSX는 자바 스크립트의 확장 문법입니다. 공식 자바스크립트 문법은 아니지만 대다수 리액트 개발자가 사용하는 문법입니다. JSX 문법을 이용하면 HTML 태그

JSX의 모든 태그는 여는 태그가 있으면 닫는 태그가 있어야 한다는 규칙입니다.JSX가 반환하는 모든 태그는 반드시 최상위 태그로 감싸야 합니다.페이지에서 렌더링되지 않는 <React.Fragment> or <> 태그를 사용할 수 있습니다. (선택사항)fun

CSS와 같은 스타일 규칙을 이용해 요소의 크기, 색상 등을 결정하는 일입니다.JSX 문법 중 하나로 HTML의 style 속성을 이용해 직접 스타일을 정의하는 방법입니다.JSX의 인라인 스타일은 style={{스타일 규칙들}}과 같은 문법으로 작성합니다.스타일을 정

Intro 🌰 리액트 앱을 만들다 보면 컴포넌트가 다른 컴포넌트에 값을 전달해야 하는 상황이 생깁니다. 컴포넌트 간에 값을 주고받는 방법을 알아보겠습니다. > ## Props란? 🐻‍❄️ 리액트에서는 부모가 자식 컴포넌트에 단일 객체 형태로 값을 전달할 수 있

Intro 🎉 이벤트랑 웹 페이지에서 일어나는 사용자의 행위입니다. 버튼 클릭, 페이지 스크롤, 새로고침 등이 이런 행위에 해당합니다. 리액트에서는 어떻게 이벤트를 처리할까요? > ## 이벤트 핸들링과 이벤트 핸들러 🫶 이벤트 핸들링은 이벤트가 발생하면 특정

Intro 🐻‍❄️ 사용자의 행위나 시간 변동에 따라 값이 변하는 동적인 리액트 컴포넌트를 만들어보겠습니다. 이를 위해서는 리액트의 핵심 기능 중 하나인 State를 알아야 합니다. State는 상태라는 뜻입니다. 상태란 어떤 사물의 형편이나 모양을 일컫는 말로 일

State로 사용자 입력 관리하기 웹 사이트에서는

React Query란? 데이터 Fetching, 캐싱, 동기화, 서버 데이터 업데이트 등을 쉽게 만들어 주는 라이브러리이다. 이 외에도 React에서 상태 관리를 하기 위해 MobX, Redux 등 여러 라이브러리가 존재한다. 상태 관리 그렇다면 상태 관리란 무엇일

Recoil이란?😊 Recoil은 React를 위한 상태 관리 라이브러리다. Recoil 사용👏 Atoms= 정의 컴포넌트 간의 공유되는 상태를 나타낸다. Atom 사용하기(useRecoilState) 정의한 Atomd을 사용하는 컴포넌트에서 useRecoilS

관심사의 분리(Seperation of Concerns, SoC)란 좋은 코드를 짜기 위한 가장 기본적인 원칙이며, 한번에 한 가지 일만 처리할 수 있도록 나누는 것이다.하나의 모듈(함수, 클래스 등의 단위)이 수행하고자 하는 목적이다.한번에 여러 관심사를 처리하려고

useState를 대체할 수 있는 함수로 컴포넌트에서 상태 변화 코드를 쉽게 분리할 수 있다.상태 변화 코드를 컴포넌트에서 분리한다는 말은 컴포넌트 내부에 작성했던 상태 변화 코드를 외부에 작성한다는 뜻이다.👉 상태 변화 코드를 분리하려는 이유? "하나의 컴포넌트 안

최적화 🧐 한마디로 웹 서비스의 성능을 개선하는 기술이다. 최적화가 잘 된 웹 서비스는 사용자를 불필요하게 기다리지 않게 만들며, 결론적으로 서비스에 대한 사용자 경험을 긍정적으로 만든다. 최적화의 방법으로는 코드, 폰트, 이미지 파일의 크기를 줄이는 등 여러 기술이

React.memo를 이용하면 메모이제이션 기법으로 컴포넌트가 불필요하게 리렌더되는 상황을 방지할 수 있다! 고차 컴포넌트와 횡단 관심사 😊 고차 컴포넌트 고차 컴포넌트(Higher Order Component, HOC)란 컴포넌트의 기능을 다시 사용하기 위한 리액

컴포넌트가 모든 상황에서 리렌더되지 않도록 강화함으로써 서비스를 최적화하는 도구이다.React.memo는 인수로 전달한 컴포넌트를 메모이제이션된 컴포넌트로 만들어 반환한다.부모 컴포넌트에서 전달된 Props가 변경되지 않는 한 리렌더되지 않는다." 컴포넌트가 크고 복잡

컴포넌트가 리렌더될 때 내부에 작성된 함수를 다시 생성하지 않도록 메모이제이션하는 리액트 훅이다.첫 번째 인수로는 메모이제이션하려는 콜백 함수를 전달하고, 두 번째 인수로는 의존성 배열을 전달한다.다음은 현재 진행중인 '할 일 관리' 프로젝트의 일부이다. (전체 코드는

리액트에서는 컴포넌트 간에 데이터를 전달하기 위해 Props를 사용한다.여기서 문제점은 2단계 이상 떨어져 있는 컴포넌트에 직접 데이터를 전달하는 것이 불가능하다.App에서 Body나 Header로 데이터 전달이 가능하지만 App에서 Main이나 Sidebar에 직접적

body { font-family: "Nanum Pen Script";}

넣고싶은 이미지를 알맞은 경로에 넣어준다.

라우팅이란? 🧐 경로를 의미하는 Route와 진행을 뜻하는 ing가 합쳐진 단어로, 경로를 지정하는 과정이라는 뜻이다. 페이지 라우팅이란? 🧐 URL 요청 경로에 맞게 적절한 페이지를 보여주는 과정이다. 예를 들어 도메인 주소가 winterlood.com인 웹 서

프로그램을 개발하는 과정에서 사용되는 설계 패턴들을 정의한 것이다.다양한 디자인 패턴이 있으며 어떤 디자인 패턴을 프로젝트에 적용할 것인지 각 프로젝트의 특성에 맞게 고려해야 한다.React 디자인 패턴 중 가장 기본적인 패턴으로, 데이터 로직을 수행하는 Contati