Front End/React
useRef
DOM reference를 활용할 수 있는 useRef예제 1 : focus예제 2 : media playbackDOM reference를 활용할 수 있는 useRefReact만 가지고 거의 대부분의 프론트엔드 요구사항을 구현할 수 있어 DOM 지식이 필요없다고 생각할 수 있지만, React로 모든 개발 요구 사항을 충족할 수는 없다. 아래처럼 DOM 엘리먼트의 주소값을 활용해야 하는 경우 특히 그렇다.focustext selectionmedia playback애니메이션 적용d3.js, greensock 등 DOM 기반 라이브러리 활용React는 이런 예외적인 상황에서 useRef로 DOM 노드, 엘리먼트, 그리고 React 컴포넌트 주소값을 참조할 수 있다. 아래의 예시코드를 보자.const 주소값을_..
UI 디자인 패턴 구현
Modal기능 구현Tab기능 구현Tag기능 구현Toggle기능 구현Autocomplete기능 구현Modalimport { useState, useRef } from "react"; import styled from "styled-components"; export const Modal = () => { const [isOpen, setIsOpen] = useState(false); const refBackdrop = useRef(null); const openModalHandler = (event) => { event.preventDefault(); setIsOpen(!isOpen); }; return ( {isOpen ? "Opened!" : "Open Modal"} {isOpen ? ( { if (e..
클라이언트 Ajax 요청
상태 끌어올리기 (Lift State Up)React 데이터 흐름단방향 데이터 흐름을 해치지 않는 React의 해결법간단한 방법 : 상태 변경 함수를 props로 전달Effect HookSide Effect (부수효과)Pure Function (순수 함수)React의 함수 컴포넌트React 컴포넌트에서의 Side EffectEffect Hook(useEffect)조건부 effect 발생주의사항Data Fetching: 필터링 예제 살펴보기1. 컴포넌트 내에서 필터링2. 컴포넌트 외부에서 필터링fetch를 이용한 AJAX 요청 보내기AJAX 요청이 매우 느릴 경우엔, 로딩화면상태 끌어올리기 (Lift State Up)React 데이터 흐름앞서 배웠듯 React 개발은 컴포넌트부터 개발을 시작해 하나로 모아..
Class Component 톺아보기
JSX를 Babel이 컴파일 하는 방법컴포넌트를 생성하는 방법함수 컴포넌트클래스 컴포넌트클래스 컴포넌트에서의 props와 statestateJSX를 Babel이 컴파일 하는 방법JSX는 코드를 작성하는 개발자에겐 직관적이고 편리한 것이 사실이지만, 브라우저가 바로 읽을 수는 없다. 이 때 등장하는 것이 JSX를 JavaScript 언어로 컴파일 해주는 Babel인데, Babel이 JSX를 어떻게 컴파일하는지 예시를 통해 React가 실제 동작하는 원리를 파악해보자.const element = ( Hello, world! );const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' );기본적으로 바벨은 React...
React Intro
React?React의 대표적인 특징 3가지1. 선언형 (Declarative)2. 컴포넌트 기반 (Component-Based)3. 범용성 (Learn Oncd, Write Anywhere)JSX (JavaScript XML)JSX와 BabelDOM, 그리고 React JSX주요 JSX 문법하나의 엘리먼트 안에 모든 엘리먼트가 포함CSS class 속성 지정은 classNameJavaScript 표현식 사용 시 중괄호 이용 {}사용자 정의 컴포넌트는 대문자로 시작조건부 렌더링에는 삼항연산자 사용여러 HTML 엘리먼트를 표시할 때는 map() 함수Component-Based컴포넌트 개발의 장점Create React AppReact 프로젝트 내의 public/index.html의 역할React?프론트엔드 ..