react-hook-form 아래 글에서 Web IDE의 로그인/회원가입을 구현할 때 react-hook-form을 사용했다고 적었다. 수료 후 우리 팀은 꾸준히 Web IDE 리팩토링을 하고 있는데, 이제 슬슬 나도 코드를 뜯어보기 위해 에디터를 들여다 보다가 react-hook-form을 좀 더 잘 이해해 봐야겠다는 생각이 들었다. (왜냐하면 저 때는 데드라인 맞추는 게 중요해서 공식 문서를 제대로 안 봤기 때문) [HongsamIDE] Web IDE 만들기 : react-hook-form으로 로그인/회원가입 구현 홍플릭스가 단순 과제 개념이라 선택사항이었다면 그 다음 프로젝트인 Web IDE는 필수였다. 그러니까 원래 팀끼리 하는 과제 1번이 SNS 클론, 2번이 넷플릭스 클론, 3번이 쇼핑몰, 4..
✏️ Describing the UI : Conditional Rendering 삼항 연산자 상품의 포장 여부를 확인하는 isPacked의 prop에 따라 체크 표시를 주려고 한다. function Item({ name, isPacked }) { if (isPacked) { return {name} ✔; } return {name}; } export default function PackingList() { return ( Sally Ride's Packing List ); } 이런 식으로 prop에 따라 JSX 트리를 다르게 반환하는 경우가 있다. 하지만 prop의 값만 다를 뿐 코드의 중복이 보인다. 이러한 중복은 크리티컬하진 않지만 유지보수에 어려움이 있다. 이와 같은 경우에 조건(삼항) 연산자로 ..
✏️ Describing the UI : Passing Props to a Component Familiar props props란 img 태그에 전달하는 className, alt, src, width...처럼 JSX 태그에 전달하는 정보를 말한다. (사용자가 정의한 컴포넌트는 어떤 props든 전달할 수 있지만 img 태그처럼 전달할 수 있는 props가 미리 정의된 경우도 있다.) Passing props to a component export default function Profile() { return ( ); } Profile 컴포넌트는 자식 컴포넌트인 Avata에 어떤 props를 전달하려고 한다. 이때 2단계에 걸쳐 전달할 수 있다. 자식 컴포넌트에 props 전달하기 예제에서는 pers..
✏️ useState Reference 📌 useState(initialState) 컴포넌트의 최상위 레벨에서 useState를 호출, state 변수 선언 구조 분해 할당으로 state 변수 이름을 지정하는 것이 관례 import { useState } from 'react'; function MyComponent() { const [age, setAge] = useState(28); const [name, setName] = useState('Taylor'); const [todos, setTodos] = useState(() => createTodos()); 📌 매개변수: 초기에 state를 설정할 값으로 모든 데이터 타입을 허용한다. 만약 함수를 전달한다면 순수해야 하며, 인자를 받지 않고, 반드..
✏️ forwardRef Reference forwardRef(render) 컴포넌트가 ref를 받아 자식 컴포넌트로 전달하려면 forwardRef()를 호출하면 된다. import { forwardRef } from 'react'; const MyInput = forwardRef(function MyInput(props, ref) { // ... }); 이전 버전의 React에서는 React.forwardRef()로 사용되었지만, 현재는 forwardRef를 import하는 것이 일반적이다. 매개변수 매개변수로 쓰이는 render는 컴포넌트의 렌더링 함수다. React는 컴포넌트가 부모로부터 받은 props와 ref를 가지고 이 함수를 호출한다. 반환하는 JSX는 컴포넌트의 결과물이 된다. 반환값 fo..
✏️ Describing the UI : JS in JSX with Curly Braces 따옴표로 문자열 전달하기 JSX에 문자열 속성을 전달하려면 작은따옴표 또는 큰따옴표로 묶는다. export default function Avatar() { return ( ); } src나 alt를 동적으로 지정하려면 따옴표를 {}로 대체하면 된다. export default function Avatar() { const avatar = 'https://i.imgur.com/7vQD0fPs.jpg'; const description = 'Gregorio Y. Zara'; return ( ); } JSX 내부에서는 중괄호로 두 가지 방법만 사용할 수 있다. JSX 태그 안에 직접 텍스트로 사용하기(⭕️) Grego..
✏️ Describing the UI : Writing Markup with JSX JSX: Putting markup into JavaScript 웹은 HTML, CSS, JS 기반으로 만들어져왔다. HTML로 콘텐츠, CSS로 디자인, JS로 로직을 작성해 각각의 분리된 파일을 관리했다. 하지만 웹의 상호작용이 많아지면서 '로직이 콘텐츠를 결정하는 경우'가 많아졌다. 그래서 JS가 HTML을 담당하게 되었고, 리액트에서 렌더링 로직과 마크업이 같은 위치의 컴포넌트에 존재하게 되었다. 각 React 컴포넌트는 리액트가 브라우저에 마크업을 렌더링할 수 있는 JS 함수다. React 컴포넌트는 JSX라는 구문 확장자로 마크업을 표현한다. JSX은 HTML과 유사해보이지만 보다 엄격하며 동적으로 정보를 표시..
✏️ useRef Reference useRef(초기값) 컴포넌트의 최상위 레벨에서 useRef를 호출해 ref를 선언한다. 초기값에는 어떤 유형의 값이든 지정할 수 있으며 초기 렌더링 이후 무시된다. import { useRef } from 'react'; function MyComponent() { const intervalRef = useRef(0); const inputRef = useRef(null); // ... useRef는 단일 프로퍼티를 가진 객체를 반환한다. 처음에는 전달한 초기값으로 설정되며 나중에 다른 값으로 바꿀 수 있다. ref 객체의 JSX 노드의 ref 속성으로 리액트에 전달하면 리액트는 current 프로퍼티를 설정한다. 아래의 렌더링 사례에서 useRef는 동일한 객체를 ..
✏️ Describing the UI : Importing and Exporting Components The root component file CRA에서는 앱 전체가 src/App.js에서 실행된다. 설정에 따라 루트 컴포넌트가 다른 파일에 위치할 수도 있고, Next.js처럼 파일 기반으로 라우팅하는 프레임워크의 경우 페이지별로 루트 컴포넌트가 다를 수 있다. 리액트에서 루트 컴포넌트는 애플리케이션 내의 최상위 엘리먼트를 의미한다. 일반적으로 리액트 앱에 진입점 역할을 하는 public/index.html 파일 내의 DOM 노드로 표시된다. import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; // ..
✏️ Describing the UI : Your First Components Components: UI building blocks 컴포넌트는 리액트의 핵심 개념 중 하나로 UI를 구축하는 기반이다. 웹에서는 HTML 태그로 풍부한 구조의 문서를 만들 수 있다. 리액트를 사용하면 마크업, CSS, JS를 컴포넌트로 결합해 재사용할 수 있다. 이 때 컴포넌트란 앱에서 재사용 할 수 있는 UI 요소라고 이해하면 된다. 리액트 앱에서 모든 UI는 컴포넌트로 구성된다. 컴포넌트를 재사용하는 것은 여러 가지 이점이 있지만, 가장 대표적으로 빠르게 다양한 화면을 개발할 수 있다는 점이다. n개의 동일한 UI를 만드는 것과 컴포넌트를 사용해 동일한 UI를 n번 사용하는 것을 상상하면 당연히 후자가 빠를 것이다. ..
