JSX는 자바스크립트 파일 안에서 HTML과 같은 마크업을 사용할 수 있도록 만들어주는 자바스크립트 문법 확장자예요. 컴포넌트를 작성하는 많은 방법들이 있음에도 불구하고 대부분의 리액트 개발자들은 JSX의 간결함을 좋아하고 많은 코드베이스가 이를 사용해요. 이 페이지에서는 - 왜 리액트가 렌더링 로직을 마크업과 함께 사용하는지 - JSX는 HTML과 어떻게 다른지 - JSX로 정보를 어떻게 보여주는지 를 알아볼 거예요. JSX: Putting markup into JavaScript | JSX: 자바스크립트에 마크업 넣기 웹은 HTML, CSS 그리고 자바스크립트로 만들어져요. 수년동안 웹 개발자들은 보통 분리된 파일로 HTML로 콘텐츠를 만들고, CSS로 디자일을 하고, 자바스크립트로 로직을 만들었어요..
리액트공식문서번역
컴포넌트의 마법은 재사용성에 있어요. 여러분은 다른 컴포넌트들로 구성된 컴포넌트를 생성할 수 있어요. 그러나 컴포넌트를 중첩하면 할수록 다른 파일로 그들을 분리하는 것이 좋아요. 파일을 분리하는 것은 코드를 스캔하기 쉽고 많은 곳에서 컴포넌트를 재사용하도록 만들어줘요. 이 페이지에서는 - 루트 컴포넌트 파일이 무엇인지 - 컴포넌트를 어떻게 불러오고(임포트하고) 내보내는지(익스포트하는지) - 디폴트(default)와 이름이 있는 불러오기와 내보내기는 각각 언제 사용하는지 - 어떻게 한 파일에서 여러 개의 컴포넌트를 불러오고 내보내는지 - 어떻게 컴포넌트를 여러개의 파일로 분리하는지 를 알아볼 거예요. The root component file | 루트 컴포넌트 파일 여러분의 첫 컴포넌트에서 아래와 같이 렌..
컴포넌트는 리액트의 중요한 콘셉트 중 하나예요. 컴포넌트는 사용자 인터페이스(UI)의 기초이기 때문에 리액트로의 여행을 시작하기 위한 최적의 장소예요. 이 페이지에서는 - 컴포넌트가 무엇인지 - 리액트 어플리케이션에서 컴포넌트가 어떤 역할을 수행하는지 - 첫 리액트 컴포넌트를 어떻게 작성하는지 를 알아볼 거예요. Components: UI building blocks | 컴포넌트: UI를 빌드하는 블록 웹에서 HTML은 이나 와 같이 내장된 태그로 풍부하고 구조화된 코드를 작성할 수 있어요. My First Component Components: UI Building Blocks Defining a Component Using a Component 이 마크업은 아티클인 , 헤딩인 그리고 (요약된) 목록을..
리액트는 사용자 인터페이스(UI)를 렌더링하기 위한 자바스크립트 라이브러리예요. UI는 버튼, 텍스트 그리고 이미지와 같은 작은 유닛에서 빌드돼요. 리액트는 이들은 재사용이 가능하고 중첩될 수 있는 컴포넌트로 합쳐줘요. 웹 사이트에서 핸드폰의 어플들까지 화면에 보여지는 모든 것들은 컴포넌트 단위로 쪼갤 수 있어요. 이번 챕터에서 리액트 컴포넌트를 만들고, 커스터마이징하고 그리고 조건적으로 화면에 띄우는 방법을 배울 거예요. 콘텐츠 목록 리액트 컴포넌트를 작성하는 방법 멀티 컴포넌트 파일을 만드는 상황과 방법 JSX를 사용하여 자바스크립트를 추가하는 방법 컴포넌트에서 자바스크립트의 기능에 접근하는 JSX를 만들기 위해 중괄호를 사용하는 방법 props로 컴포넌트를 구성하는 방법 컴포넌트를 조건부로 렌더링하..
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 | ..
useReducer는 컴포넌트에 리듀서(reducer)를 추가해주는 리액트 훅이에요. const [state, dispatch] = useReducer(reducer, initialArg, init?) Reference | 레퍼런스 useReducer(reducer, initialArg, init?) 리듀서로 상태를 관리하기 위해서는 최상위 컴포넌트에서 useReducer를 호출하세요. import { useReducer } from 'react'; function reducer(state, action) { // ... } function MyComponent() { const [state, dispatch] = useReducer(reducer, { age: 42 }); // ... Parameter..
카나리아 테스트 useOptimistic 훅은 현재 React의 Canary과 실험실 채널에서만 사용할 수 있어요. 리액트의 릴리즈된 채널에 대해서 알아보려면 여기를 눌러주세요. useOptimistic은 UI를 낙관적으로 업데이트해주는 리액트 훅이에요. const [optimisticState, addOptimistic] = useOptimistic(state, updateFn); Reference | 레퍼런스 useOptimistic(state, updateFn) useOptimistic는 비동기 작업이 진행 중인 동안 다른 상태를 보여주는 리액트 훅이에요. useOptimistic은 인자로 어떤 상태를 받고, 네트워크 요청과 같은 비동기 작업이 지속되는 동안 달라질 수 있는 상태의 복사본을 반환해요..
