컴포넌트는 종종 서로 다른 조건에서 서로 다른 요소들을 보여줘야할 필요가 있어요. 리액트에서는 if문이나 &&, 그리고 ? : 연산자와 같은 자바스크립트 문법을 사용하여 JSX를 조건적으로 렌더링할 수 있어요. 이 페이지에서는 - 어떻게 조건에 맞춰 서로 다른 JSX를 반환하는지 - 어떻게 조건적으로 JSX 조각을 포함하거나 제외하는지 - 리액트 코드베이스에서 마주하게 될 흔한 조건부 구문 단축 를 알아볼 거예요. Conditionally returning JSX | 조건부로 JSX 반환하기 여러개의 Item들을 렌더링하는 PackingList 컴포넌트가 있고 이미 쌌는지 아니면 아직 싸지 않았는지를 표시할 수 있다고 가정해볼게요. 몇몇 Item 컴포넌트는 false가 아니라 true로 설정된 isPac..
리액트한국어
리액트 컴포넌트는 서로 통신을 하기 위하여 props를 사용해요. 모든 부모 컴포넌트는 자식 컴포넌트에게 props를 내려서 정보를 전달해요. props라고 하면 HTML 속성을 생각하겠지만 props를 통해서는 객체, 배열 그리고 함수를 포함한 그 어떤 자바스크립트 값을 전달할 수 있어요. 이 페이지에서는 - 컴포넌트에 props를 어떻게 전달하는지 - 컴포넌트에서 props를 어떻게 읽는지 - props의 기본값을 어떻게 지정하는지 - JSX를 컴포넌트에 어떻게 전달하는지 - 시간이 지나면 props가 어떻게 변하는지 를 알아볼 거예요. Familiar props | 익숙한 props props는 JSX 태그에 전달하는 정보예요. 예를 들어, className, src, alt, width 그리고 h..
JSX는 자바스크립트 파일 안에서 HTML과 같은 마크업을 사용할 수 있도록 만들어주는 자바스크립트 문법 확장자예요. 컴포넌트를 작성하는 많은 방법들이 있음에도 불구하고 대부분의 리액트 개발자들은 JSX의 간결함을 좋아하고 많은 코드베이스가 이를 사용해요. 이 페이지에서는 - 왜 리액트가 렌더링 로직을 마크업과 함께 사용하는지 - JSX는 HTML과 어떻게 다른지 - JSX로 정보를 어떻게 보여주는지 를 알아볼 거예요. JSX: Putting markup into JavaScript | JSX: 자바스크립트에 마크업 넣기 웹은 HTML, CSS 그리고 자바스크립트로 만들어져요. 수년동안 웹 개발자들은 보통 분리된 파일로 HTML로 콘텐츠를 만들고, CSS로 디자일을 하고, 자바스크립트로 로직을 만들었어요..
useTransition은 UI를 방해하지 않고 상태를 업데이트해주는 리액트 훅이에요. const [isPending, startTransition] = useTransition() Reference | 레퍼런스 useTransition() 상태의 업데이트를 트랜지션으로 표시하려면 최상위 컴포넌트에서 useTransition를 호출하세요. import { useTransition } from 'react'; function TabContainer() { const [isPending, startTransition] = useTransition(); // ... } Parameters | 파라미터(매개변수) useTransition은 매개변수가 필요하지 않아요. Returns | 반환값 useTransit..
useSyncExternalStore은 외부 저장소를 구독할 수 있도록 만들어주는 리액트 훅이에요. const snapshot = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?) Reference | 레퍼런스 useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?) 외부 데이터 저장소의 값을 읽어오고 싶다면 최상위 컴포넌트에서 useSyncExternalStore을 호출하세요. import { useSyncExternalStore } from 'react'; import { todosStore } from './todoStore.js'; function TodosApp() { c..
useState는 컴포넌트에 상태 변수를 추가하는 리액트 훅이에요. const [state, setState] = useState(initialState); Reference | 레퍼런스 useState(initialState) 상태 변수를 선언하고 싶다면 최상위 컴포넌트에서 useState(initialState)를 호출하세요. import { useState } from 'react'; function MyComponent() { const [age, setAge] = useState(28); const [name, setName] = useState('Taylor'); const [todos, setTodos] = useState(() => createTodos()); // ... } 배열을 구조분..
useRef는 렌더링을 할 필요가 없는 값을 참조할 수 있게 해주는 리액트 훅이에요. const ref = useRef(initialValue) Reference | 레퍼런스 useRef(initialValue) ref를 선언하고 싶다면 최상위 컴포넌트에서 useRef를 호출하세요. import { useRef } from 'react'; function MyComponent() { const intervalRef = useRef(0); const inputRef = useRef(null); // ... } Parameters | 파라미터 initialValue : ref 객체의 current 속성이 최초로 지정될 값. 타입은 상관이 없어요. 이 인자는 최초 렌더링 이후에는 무시돼요. Returns | ..
카나리아 테스트 useOptimistic 훅은 현재 React의 Canary과 실험실 채널에서만 사용할 수 있어요. 리액트의 릴리즈된 채널에 대해서 알아보려면 여기를 눌러주세요. useOptimistic은 UI를 낙관적으로 업데이트해주는 리액트 훅이에요. const [optimisticState, addOptimistic] = useOptimistic(state, updateFn); Reference | 레퍼런스 useOptimistic(state, updateFn) useOptimistic는 비동기 작업이 진행 중인 동안 다른 상태를 보여주는 리액트 훅이에요. useOptimistic은 인자로 어떤 상태를 받고, 네트워크 요청과 같은 비동기 작업이 지속되는 동안 달라질 수 있는 상태의 복사본을 반환해요..
useMemo는 리렌더링 사이에 계산 결과를 캐싱해주는 리액트 훅이에요. const cachedValue = useMemo(calculateValue, dependencies) Reference | 레퍼런스 useMemo(calculateValue, dependencies) 리렌더링 사이에 계산을 캐싱하고 싶다면 최상위 컴포넌트에서 useMemo를 호출하세요. import { useMemo } from 'react'; function TodoList({ todos, tab }) { const visibleTodos = useMemo( () => filterTodos(todos, tab), [todos, tab] ); // ... } Parameters | 파라미터(매개변수) calculateValue :..
함정 useLayoutEffect는 성능 저하를 유발할 수 있어요. 가능하다면 useEffect를 사용하세요. useLayoutEffect는 useEffect의 한 종류로 브라우저가 화면을 리페인트하기 전에 실행돼요. useLayoutEffect(setup, dependencies?) Reference | 레퍼런스 useLayoutEffect(setup, dependencies?) 브라우저가 화면을 리페인트하기 전에 레이아웃을 측정하려면 useLayoutEffect를 호출하세요. import { useState, useRef, useLayoutEffect } from 'react'; function Tooltip() { const ref = useRef(null); const [tooltipHeight,..
