{"id":"QduRma","createdAt":"2025-04-27T09:51:28.564Z","updatedAt":"2025-07-11T23:25:04.964Z","title":"React 핵심 패턴 with TS","content":"/// message-box --icon=info\n이 글은 [Vite로 시작하는 React 프로젝트](/p/6iFzkB)를 기반으로 설명합니다.\n///\n\n## TSX 컴포넌트 구조\n\nReact 프로젝트에서 단일의 `.tsx` 파일을 컴포넌트(Component)라고 부릅니다.\n다음과 같은 기본 구조를 가지며, 컴포넌트 이름은 일반적으로 파스칼 케이스로 작성합니다.\n\n```tsx --path=/src/App.tsx\nexport default function 컴포넌트이름() {\n return (\n // HTML Template\n

\n )\n}\n```\n\nReact 17버전부터는 타입을 사용할 때 컴포넌트 상단에 `import React from ‘react’` 코드를 명시할 필요가 없습니다.\n단, 일부 프로젝트의 개발 도구나 환경에 따라 해당 코드 명시가 필요할 수도 있습니다.\n\n## Fragment\n\nReact 컴포넌트는 여러 최상위 요소를 지정할 수 없습니다.\n다음과 같이 하나의 최상위 요소(`

`)만 지정해야 합니다.\n\n```tsx --path=/src/App.tsx\nexport default function App() {\n return (\n

HEADER

MAIN

\n \n

\n )\n}\n```\n\n하지만 이것은 다음과 같이 요소들을 이중으로 묶는 불필요한 요소가 되기도 합니다.\n\n```html --caption=출력된 결과.\n\n

HEADER

MAIN

\n \n

\n\n```\n\n컴포넌트의 최상위 요소로 Fragment(`<>`)를 사용하면, 별도의 요소를 생성하지 않고 여러 요소를 묶어 하나의 자식 요소처럼 출력할 수 있습니다.\n\n```tsx --path=/src/App.tsx\nexport default function App() {\n return (\n <>\n

HEADER

MAIN

\n \n \n )\n}\n```\n\n이제 다음과 같이 출력합니다.\n\n```html --caption=출력된 결과.\n\n

\n \n

HEADER

MAIN

\n \n

\n\n```\n\n만약 Fragment에 속성을 지정해야 하는 경우, `<>`이 아닌 명시적으로 `` 컴포넌트를 사용해야 합니다.\n\n```tsx --path=/src/App.tsx --line-active=1,5\nimport { Fragment } from 'react'\n\nexport default function App() {\n return (\n \n

HEADER

MAIN

\n \n \n )\n}\n```\n\n특히 단일 요소가 아닌 여러 요소를 반복 출력하는 경우 유용합니다.\n\n```tsx --line-active=1,20\nimport { Fragment } from 'react'\n\nconst fruits = [\n {\n id: 1,\n term: '사과',\n detail: '빨갛거나 초록의 달콤한 과일'\n },\n {\n id: 2,\n term: '바나나',\n detail: '노란색의 부드럽고 달콤한 과일'\n }\n]\n\nexport default function App() {\n return (\n

{fruit.term}: {fruit.detail}

\n )\n}\n```\n\n## 데이터 보간\n\n컴포넌트 템플릿(Template)에서 `{}` 기호를 사용해 데이터를 쉽게 출력할 수 있습니다.\n이를 보간법(Interpolation)이라고 부릅니다.\n\n```tsx --path=/src/App.tsx\nexport default function App() {\n const name = 'ParkYoungWoong'\n\n return (\n

Hello, {name}!

\n )\n}\n```\n\n템플릿의 `{}` 기호 사이에서 간단한 표현식(Expression)을 사용할 수 있습니다.\n\n```tsx --path=/src/App.tsx\nexport default function App() {\n const count = 1\n\n function getFullName(firstName: string, lastName: string) {\n return `${firstName} ${lastName}`\n }\n\n return (\n <>\n

{count + 7}

{getFullName('YoungWoong', 'Park')}

\n \n )\n}\n```\n\n## 반응형 데이터\n\nReact에서 데이터가 변경될 때 그것이 연결된 화면(View)도 같이 변경되는 것을 데이터의 반응성(Reactivity)이라고 합니다. \n그리고 그 데이터를 반응형 데이터(Reactive state) 혹은 상태(State)라고 부르며, 줄여서 반응형이라고도 합니다.\n다음과 같이 `useState` 함수를 사용해 반응형 데이터를 만들 수 있습니다.\n\n```tsx\nimport { useState } from 'react'\n\n// 반응형 데이터 선언\nconst [데이터이름, 데이터변경함수] = useState<데이터타입>(기본값)\n\n// 반응형 데이터 변경\n데이터변경함수(변경할값)\n```\n\n```tsx --path=/src/App.tsx\nimport { useState } from 'react'\n\nexport default function App() {\n // const [count, setCount] = useState(0)\n const [count, setCount] = useState(0) // 추론 가능한 타입은 생략 가능\n\n function increment() {\n setCount(count + 1)\n }\n\n return (\n <>\n

현재 카운트: {count}

\n \n \n )\n}\n```\n\n## 이벤트 핸들링\n\n템플릿에서 `on` 키워드와 DOM 이벤트 이름을 조합해 요소의 속성으로 작성하고 실행할 함수를 연결합니다.\n`on` 키워드와 조합된 이름은 `onClick`, `onKeyDown`과 같이 카멜 케이스로 작성해야 합니다.\n\n```tsx\n

\n\n// 예시\n

\n```\n\n다음 예제와 같이 ``에 `value`와 `onChange` 속성을 통해 `text` 데이터를 양방향(Two-way Data Binding)으로 연결할 수 있습니다.\n이때 `change` 이벤트의 핸들러(실행할 함수)를 TSX 템플릿에 인라인으로 작성할 수 있습니다.\n\n```tsx --line-active=9\nimport { useState } from 'react'\n\nexport default function App() {\n const [text, setText] = useState('')\n\n return (\n setText(e.target.value)}\n />\n )\n}\n```\n\n이벤트 핸들러를 별도의 함수로 작성할 수도 있습니다.\n다만 이벤트 객체의 타입은 직접 명시해야 합니다.\nReact는 네이티브 DOM 이벤트를 React 이벤트로 매핑하며, 이러한 이벤트 타입은 React 네임스페이스에서 사용할 수 있습니다.\n그리고 제네릭으로 이벤트가 발생하는 HTML 요소의 타입을 지정해야 합니다.\n\n```tsx --line-active=7-9,14\nimport { useState } from 'react'\n\nexport default function App() {\n const [text, setText] = useState('')\n\n // React.이벤트타입<요소타입>\n function handleChange(event: React.ChangeEvent) {\n setText(event.target.value)\n }\n\n return (\n \n )\n}\n```\n\n이벤트 핸들러의 내용이 복잡해지면 별도의 함수로 분리하는 것이 좋습니다.\n\n```tsx --line-active=21\nimport { useState } from 'react'\n\nexport default function App() {\n const [count, setCount] = useState(0)\n const [text, setText] = useState('')\n\n function handleSubmit(event: React.FormEvent) {\n event.preventDefault()\n const formData = new FormData(event.currentTarget)\n const text = formData.get('text')\n console.log(text)\n // ...\n }\n\n return (\n <>\n

현재 카운트: {count}

\n \n

\n setText(e.target.value)}\n />\n \n \n \n )\n}\n```\n\n매핑된 React 이벤트에서 접근할 수 없는 네이티브 이벤트 정보를 사용하려면 `nativeEvent` 속성을 사용합니다.\n\n```tsx --line-active=8\nimport { useState } from 'react'\n\nexport default function App() {\n const [text, setText] = useState('')\n\n function handleKeyDown(event: React.KeyboardEvent) {\n // CJK의 입력기 조합 중인지 확인!\n if (event.key === 'Enter' && !event.nativeEvent.isComposing) {\n // ...\n }\n }\n\n return (\n setText(e.target.value)}\n onKeyDown={handleKeyDown}\n />\n )\n}\n```\n\n## HTML Class 바인딩\n\n`class`는 자바스크립트에서 예약어(Reserved words)이므로 JSX 템플릿에서는 HTML 속성(Attribute)으로 `class` 대신 `className`을 사용해야 합니다.\n\n```tsx --path=/src/App.tsx\nimport { useState } from 'react'\nimport './App.css'\n\nexport default function App() {\n const [active, setActive] = useState(false)\n\n return (\n <>\n

Hello world!

\n \n \n )\n}\n```\n\n```css --path=/src/App.css\n.active {\n color: red;\n}\n```\n\n여러 클래스 이름을 데이터 여부로 출력하는 경우, 다음과 같이 불린 데이터를 기반으로 클래스 이름이 적용될 수 있도록 코드를 작성할 수도 있습니다.\n\n```tsx --path=/src/App.tsx\nimport { useState } from 'react'\nimport './App.css'\n\nexport default function App() {\n const [btn, setBtn] = useState(false)\n const [active, setActive] = useState(false)\n const [size, setSize] = useState(false)\n\n function getClassNames(names: Record) {\n return Object.keys(names)\n .filter(name => names[name])\n .join(' ')\n }\n\n const classNames = getClassNames({\n btn,\n active,\n size\n })\n\n return (\n <>\n

Hello world!

\n \n \n \n \n )\n}\n```\n\n```css --path=/src/App.css\n.btn {\n border: 4px solid;\n}\n.active {\n color: red;\n}\n.size {\n font-size: 16px;\n}\n```\n\n## HTML Style 바인딩\n\n`style` 속성으로 인라인 스타일을 적용할 수 있습니다.\n객체 데이터로 작성할 수 있으며, 낙타 표기법(camelCase)로 CSS 속성(Properties)을 작성해야 합니다.\n\n```tsx --path=/src/App.tsx --line-active=6,7\nimport { useState } from 'react'\n\nexport default function App() {\n const [size, setSize] = useState(16)\n const styles = {\n fontSize: `${size}px`, // 동적(dynamic) 값은 반응형 데이터로 관리합니다!\n fontWeight: '700' // 정적(static) 값은 별도의 CSS 파일로 관리하는 것이 좋습니다.\n }\n\n return (\n <>\n \n \n

Hello world!

\n \n )\n}\n```\n\n## 조건부 렌더링\n\n### 논리 연산자\n\n논리 연산자(`&&`)를 사용해 조건에 따라 템플릿(HTML)을 출력하거나 출력하지 않습니다.\n\n```tsx --path=/src/App.tsx --line-active=12\nimport { useState } from 'react'\n\nexport default function App() {\n const [message, setMessage] = useState('')\n\n return (\n <>\n setMessage(e.target.value)}\n />\n {message.trim() &&

입력된 내용이 있어요~

}\n \n )\n}\n```\n\n### 삼항 연산자\n\n삼항 연산자를 사용해 조건에 따라 각자 다른 템플릿을 출력합니다.\n\n```tsx --path=/src/App.tsx --line-active=12-14\nimport { useState } from 'react'\n\nexport default function App() {\n const [isActive, setIsActive] = useState(false)\n\n function toggle() {\n setIsActive(!isActive)\n }\n\n return (\n <>\n {isActive \n ? (

활성화 - {String(isActive)}

) \n : (

비활성화 - {String(isActive)}

)}\n \n \n )\n}\n```\n\n### 더 복잡한 조건\n\n조건에 따라 출력할 템플릿이 2개 이상인 경우, 표현식이 아닌 구문(Statement)을 템플릿에 직접 사용할 수 없기 때문에, 다음과 같이 별도 함수로 만들어 `if`나 `switch` 조건 구문을 사용해 템플릿을 반환합니다.\n\n```tsx --path=/src/App.tsx --line-active=7-13\nimport { useState } from 'react'\n\nexport default function App() {\n const [state, setState] = useState('')\n\n function renderStateMessage() {\n if (state === 'loading') {\n return

로딩 중입니다.

\n } else if (state === 'success') {\n return

성공적으로 완료되었습니다.

\n } else {\n return

대기 중입니다.

\n }\n }\n\n return (\n <>\n \n \n {renderStateMessage()}\n \n )\n}\n```\n\n## 리스트 렌더링\n\n데이터를 기반으로 목록을 출력할 수 있습니다.\n데이터의 변경사항이 있을 때 React가 반응성(Reactivity)을 효율적으로 관리할 수 있도록, 반복되는 각 요소에 `key` 속성과 함께 항목별 고유한 값을 작성해야 합니다.\n`key` 속성의 고유한 값은 일반적으로 문자나 숫자 데이터를 권장합니다.\n\n/// message-box --icon=warning\n객체나 배열 데이터는 가변하는 참조형(Reference type)이므로, React가 `key` 속성을 통해 반응성을 관리할 수 없습니다.\n///\n\n```tsx --path=/src/App.tsx --line-active=3-5,10\nexport default function App() {\n const fruits = ['사과', '바나나', '체리']\n const renderFruits = fruits.map((fruit, index) => (\n

{fruit}

\n ))\n\n return (\n <>\n

과일 리스트

{renderFruits}\n \n )\n}\n```\n\n별도의 함수를 만들지 않고 다음과 같이 템플릿에 직접 작성할 수도 있습니다.\n\n```tsx --path=/src/App.tsx --line-active=8-10\nexport default function App() {\n const fruits = ['사과', '바나나', '체리']\n\n return (\n <>\n

과일 리스트

{fruit}

\n \n )\n}\n```\n\n## 계산된 데이터\n\n`useMemo` 함수를 사용해 데이터가 변경될 때 그것을 기반으로 자동 계산되어(Computed) 업데이트되는 별도의 데이터를 만들 수 있습니다.\n기반 데이터는 반응형이어야 합니다!\n\n```tsx\nimport { useMemo } from 'react'\n\n// 계산된 데이터 선언\nconst 계산된데이터 = useMemo(() => 새로운값, [기반데이터])\n```\n\n```tsx --path=/src/App.tsx --line-active=1,5\nimport { useState, useMemo } from 'react'\n\nexport default function App() {\n const [count, setCount] = useState(0)\n const double = useMemo(() => count * 2, [count])\n\n return (\n <>\n

count: {count}

double: {double}

\n \n \n )\n}\n```\n\n## 데이터 감시\n\n`useEffect` 함수를 사용해 데이터가 변경될 때 그것을 감시(Watch)하여 자동으로 실행되는 함수(콜백)를 만들 수 있습니다.\n감시할 데이터는 반응형이어야 합니다!\n\n```tsx\nimport { useEffect } from 'react'\n\n// 데이터 감시 선언\nuseEffect(실행할함수, [감시할데이터])\n```\n\n```tsx --path=/src/App.tsx\nimport { useState, useEffect } from 'react'\n\nexport default function App() {\n const [count, setCount] = useState(0)\n\n useEffect(() => {\n console.log('count 값이 변경되었습니다:', count)\n }, [count])\n\n return (\n <>\n

카운트: {count}

\n \n \n )\n}\n```\n\n만약 `useEffect` 함수 콜백이 최초 렌더링 시 2번 연속으로 실행되는 경우, ``를 사용하지 않는 것을 고려하세요.\n이것은 프로젝트의 문제를 감지하고 경고해주는 도구로 의도적으로 2번의 렌더링을 사용할 수 있습니다.\n단순히 개발 모드에서만 활성화되고 빌드 결과(제품)에는 영향을 끼치지 않으니 제거해도 좋습니다.\n\n```tsx --path=/src/main.js --line-active=12-14 --line-error=6-8\nimport React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport App from '~/App'\n\n// ReactDOM.createRoot(document.getElementById('root')!).render(\n// \n// \n// \n// )\n\nReactDOM.createRoot(document.getElementById('root')!).render(\n <>\n \n \n)\n```\n\n## 양식 입력 바인딩\n\n`input`이나 `textarea` 같은 양식(Form) 요소와 React의 반응형 데이터를 연결하는 여러 패턴의 예제를 소개합니다.\n\n### 텍스트\n\n```tsx\nimport { useState } from 'react'\n\nexport default function App() {\n const [text, setText] = useState('')\n\n return (\n <>\n setText(e.target.value)}\n />\n

{text}

\n \n )\n}\n```\n\n### 여러 줄 텍스트\n\n```tsx\nimport { useState } from 'react'\n\nexport default function App() {\n const [text, setText] = useState('')\n\n return (\n <>\n setText(e.target.value)}\n />\n

{text}

\n \n )\n}\n```\n\n### 수정 가능 요소\n\n일반 요소는 `contenteditable` 속성을 통해, 수정 가능 요소로 만들어 텍스트를 수정할 수 있습니다.\n\n```html\n

Content!

\n```\n\n하지만 React에서 이 속성을 사용하면, 가상 DOM 충돌, 이벤트 점프 등의 문제가 발생할 수 있기 때문에, 일반적인 문제가 대부분 해결된 [react-contenteditable 라이브러리](https://www.npmjs.com/package/react-contenteditable?ref=blixt-dev)를 사용하는 것을 추천합니다.\n\n```bash\nnpm i react-contenteditable\n```\n\n`

`, `
` 같은 요소를 통해 줄바꿈 처리를 하므로, 입력된 값이 없으면 내용을 비웁니다.\n`placeholder` 속성 대신 `aria-placeholder` 속성을 사용해 힌트를 제공할 수 있습니다.(CSS 코드를 같이 제공해야 합니다)\n\n```tsx\nimport { useRef, useState } from 'react'\nimport ContentEditable from 'react-contenteditable'\nimport type { ContentEditableEvent } from 'react-contenteditable'\n\nexport default function App() {\n const [text, setText] = useState('')\n const ref = useRef(null)\n\n function onChange(event: ContentEditableEvent) {\n setText(event.target.value)\n }\n\n return (\n <>\n }\n html={text}\n onChange={onChange}\n aria-placeholder=\"텍스트를 입력하세요!\"\n />\n

{text}

\n \n )\n}\n```\n\n```css\n[contenteditable]:empty::before {\n content: attr(aria-placeholder);\n color: #aaa;\n}\n```\n\n### 단일 체크박스\n\n```tsx\nimport { useState } from 'react'\n\nexport default function App() {\n const [checked, setChecked] = useState(false)\n\n return (\n <>\n \n setChecked(e.target.checked)}\n />\n 동의합니다.\n \n

동의 여부: {checked ? '예' : '아니오'}

\n \n )\n}\n```\n\n### 다중 체크박스\n\n```tsx\nimport { Fragment, useState } from 'react'\n\nconst fruits = ['사과', '바나나', '체리', '딸기']\n\nexport default function App() {\n const [checkedItems, setCheckedItems] = useState([])\n\n const handleCheckboxChange = (event: React.ChangeEvent) => {\n const { value, checked } = event.target\n return checked\n ? setCheckedItems([...checkedItems, value]) // 체크한 경우\n : setCheckedItems(checkedItems.filter(item => item !== value)) // 체크 해제한 경우\n }\n\n return (\n <>\n

좋아하는 과일을 모두 골라보세요~

\n {fruits.map(fruit => (\n \n \n \n {fruit}\n \n
\n \n ))}\n

{checkedItems.join(', ')}

\n \n )\n}\n```\n\n### 라디오 버튼\n\n```tsx\nimport { Fragment, useState } from 'react'\n\nconst fruits = ['사과', '바나나', '체리', '딸기']\n\nexport default function App() {\n const [text, setText] = useState('')\n\n return (\n <>\n

좋아하는 과일을 하나만 골라보세요~

\n {fruits.map(fruit => (\n \n \n setText(e.target.value)}\n />\n {fruit}\n \n
\n \n ))}\n

{text}

\n \n )\n}\n```\n\n### 단일 선택\n\n```tsx\nimport { useState } from 'react'\n\nconst fruits = ['사과', '바나나', '체리', '딸기']\n\nexport default function App() {\n const [selected, setSelected] = useState('')\n\n return (\n <>\n setSelected(e.target.value)}>\n \n {fruits.map(fruit => (\n \n {fruit}\n \n ))}\n \n

{selected}

\n \n )\n}\n```\n\n### 다중 선택\n\n```tsx\nimport { useState } from 'react'\n\nconst fruits = ['사과', '바나나', '체리', '딸기']\n\nexport default function App() {\n const [selected, setSelected] = useState([])\n\n function handleChange(event: React.ChangeEvent) {\n const { options } = event.target\n const newSelected: string[] = []\n Array.from(options).forEach(option => {\n if (option.selected) {\n newSelected.push(option.value)\n }\n })\n setSelected(newSelected)\n }\n\n return (\n <>\n \n {fruits.map(fruit => (\n \n {fruit}\n \n ))}\n \n

{selected.join(', ')}

\n \n )\n}\n```\n\n## 템플릿(요소) 참조\n\nReact에서는 `document.querySelector`를 통해 요소를 검색하지 않고, 대신 `useRef` 훅을 통해 템플릿(요소)을 바로 참조하도록 만들 수 있습니다.\n\nRef 객체를 반환하는 `useRef` 훅의 기본값(Default value)은 요소를 찾지 못한 결과를 의미하는 `null`을 사용합니다.\n그리고 참조할 요소에 `ref` 속성으로 Ref 객체를 연결하면, `inputRef.current`와 같이 Ref 객체의 `current` 속성으로 참조 요소를 확인할 수 있습니다.\n\n```tsx\nimport { useRef } from 'react'\n\nexport default function App() {\n const inputRef = useRef(null)\n\n return (\n <>\n \n \n \n )\n}\n```\n\n컴포넌트에서 `ref` 속성을 사용하는 경우, 별도의 타입 지정이 필요합니다.\n\n```tsx --path=/src/App.tsx --line-active=5,9\nimport { useRef } from 'react'\nimport TextField from '@/components/TextField'\n\nexport default function App() {\n const inputRef = useRef(null)\n\n return (\n <>\n \n \n )\n}\n```\n\n`React.RefObject<참조_요소_타입 | null>` 으로 `ref` 속성(Props)의 타입을 명시합니다.\n\n```tsx --path=/src/components/TextField.tsx --line-active=2\ninterface Props extends React.InputHTMLAttributes {\n ref?: React.RefObject\n}\n\nexport default function TextField({ ...restProps }: Props) {\n return (\n <>\n \n \n )\n}\n```\n\n## 컴포넌트\n\n### 생명주기 훅\n\n`input` 요소가 화면에 보이면 자동으로 포커스(Focus) 하기 위해 다음 예제와 같이 작성하면 에러가 발생합니다.\n이것은 React 컴포넌트의 자바스크립트 코드가 동작하는 시점(Created)과 템플릿이 화면에 렌더링 되는 시점(Mounted)이 다르기 때문입니다.\n\n```tsx\nimport { useRef } from 'react'\n\nexport default function App() {\n const inputRef = useRef(null)\n\n // input 요소에 포커스!\n // Error - cannot read properties of null (reading 'focus')\n inputRef.current?.focus()\n\n return \n}\n```\n\n다음과 같이 `useEffect` 함수를 사용하면, 템플릿이 화면에 렌더링 된 후 함수를 실행할 수 있습니다.\n`useEffect` 함수는 데이터를 감시할 때도 사용하지만, 이렇게 ‘화면 준비 후’에 실행될 함수를 작성할 때도 사용합니다.\n단, 감시할 데이터가 없기 때문에 의존성은 빈(Empty) 배열입니다.\n\n```tsx\nimport { useEffect } from 'react'\n\nuseEffect(실행할함수, [])\n```\n\n이제 잘 동작합니다!\n\n```tsx\nimport { useRef, useEffect } from 'react'\n\nexport default function App() {\n const inputRef = useRef(null)\n\n // 화면이 준비되면, input 요소에 포커스!\n useEffect(() => {\n inputRef.current?.focus()\n }, [])\n\n return \n}\n```\n\n만약 다음과 같이 `useEffect` 함수의 두 번째 인수로 배열을 전달하지 않으면, 반응형 데이터 갱신 등의 영향으로 컴포넌트가 다시 렌더링 될 때마다 콜백이 실행됩니다.\n일반적으로 추천하지 않는 방법입니다.\n\n```tsx --line-error=4\n// 컴포넌트가 다시 렌더링(Rerendering) 될 때마다 콜백이 실행\nuseEffect(() => {\n console.log('count 값이 변경되었습니다:')\n})\n```\n\n`useEffect`의 콜백에서 반환하는 함수는 컴포넌트가 해제될 때 실행됩니다.\n컴포넌트가 해제될 때 처리해야 하는 로직을 추가할 수 있습니다.\n\n```tsx --line-active=6-8\nimport { useEffect } from 'react'\n\nexport default function App() {\n useEffect(() => {\n window.addEventListener('click', offMenu)\n return () => {\n window.removeEventListener('click', offMenu)\n }\n }, [])\n\n function offMenu() {}\n \n return //...\n}\n```\n\n### 부모와 자식 컴포넌트\n\n컴포넌트는 다른 컴포넌트를 가져와서 사용할 수 있습니다.\n가져온 컴포넌트는 나의 자식 컴포넌트라고 부르며, 나는 자식의 부모 컴포넌트라고 부릅니다.\n다음 예제에서 `TextField.tsx`는 `App.tsx`의 자식 컴포넌트이고, `App.tsx`는 `TextField.tsx`의 부모 컴포넌트입니다.\nHTML 요소의 부모/자식 관계 개념과 같습니다.\n\n```tsx --path=/src/components/TextField.tsx\nexport default function TextField() {\n return (\n <>\n \n \n )\n}\n```\n\nVite 프로젝트에서는 가져오기 경로의 `.tsx` 컴포넌트 확장자를 생략할 수 있습니다.\n\n```tsx --path=/src/App.tsx\nimport TextField from './components/TextField'\n\nexport default function App() {\n return (\n <>\n \n \n \n \n )\n}\n```\n\n### Props\n\n부모 컴포넌트에서 자식 컴포넌트로 데이터(반응형 데이터, 함수 등)를 전달할 수 있습니다.\n이렇게 전달하는 데이터 혹은 그 속성을 Prop이라고 부릅니다.\n\n```tsx --path=/src/components/TextField.tsx --line-active=1-11\nexport default function TextField({\n label = '',\n hint = '',\n value,\n onChange\n}: {\n label?: string\n hint?: string\n value: string\n onChange: (value: string) => void\n}) {\n return (\n

\n \n {label && {label}}\n onChange(e.target.value)}\n />\n \n {hint &&

{hint}

}\n

\n )\n}\n```\n\n다음과 같이 컴포넌트(``)를 사용할 때, HTML 속성(Attribute)처럼 작성해 데이터를 전달합니다.\n\n```tsx --path=/src/App.tsx --line-active=11-14\nimport { useState } from 'react'\nimport TextField from '@/components/TextField'\n\nexport default function App() {\n const [name, setName] = useState('')\n const [age, setAge] = useState('')\n const [email, setEmail] = useState('')\n return (\n <>\n \n \n \n

\n 이름은 {name}이고 나이는 {age}세이고 이메일은 {email}입니다!\n

\n \n )\n}\n```\n\n### 폴스루 속성\n\n컴포넌트에서 Props로 정의하지 않았지만, 컴포넌트를 사용할 때 작성한 속성을 폴스루 속성(Fallthrough props)이라고 부릅니다.\n\n```tsx --path=/src/App.tsx --line-active=12-20 --caption=Props로 정의하지 않는 여러 속성을 사용\nimport { useState } from 'react'\nimport TextField from '@/components/TextField'\n\nexport default function App() {\n const [email, setEmail] = useState('')\n\n return (\n <>\n setEmail(e.target.value)}\n name=\"Email\"\n placeholder=\"이메일을 입력해주세요.\"\n minLength={5}\n maxLength={24}\n autoComplete=\"email\"\n required\n />\n \n )\n}\n```\n\n다음과 같이, 전개 연산자(Spread operator, `...`)를 사용해 나머지 매개변수(Rest parameters)로 폴스루 속성을 원하는 요소에 연결할 수 있습니다.\n`value`와 `onChange` 속성은 ``의 고유 속성이니 다음과 같이 작성하지 않고 생략할 수 있습니다.\n\n```tsx --path=/src/components/TextField.tsx --line-active=9,16 --line-error=17-18\ninterface Props extends React.InputHTMLAttributes {\n label?: string\n hint?: string\n}\n\nexport default function TextField({\n label = '',\n hint = '',\n ...restProps\n}: Props) {\n return (\n

\n \n {label && {label}}\n restProps.onChange?.(e)}\n />\n \n {hint &&

{hint}

}\n

\n )\n}\n```\n\n### 슬롯\n\n컴포넌트의 템플릿 특정 위치에 다른 컴포넌트나 요소를 삽입할 수 있는 기능을 슬롯(Slot)이라고 합니다.\n`children`이라는 약속된 Prop을 사용해 슬롯을 구현할 수 있습니다.\n\n```tsx --path=/src/components/Button.tsx\nexport default function Button({\n loading = false,\n children,\n ...props\n}: React.ButtonHTMLAttributes & {\n loading?: boolean\n}) {\n return (\n \n {loading ? '로딩중' : children}\n \n )\n}\n```\n\n```tsx --path=/src/App.tsx\nimport { useState } from 'react'\nimport Button from '@/components/Button'\n\nexport default function App() {\n const [loading, setLoading] = useState(true)\n return (\n <>\n \n \n \n )\n}\n```\n\n### CSS 모듈(module)\n\n특정 컴포넌트의 스타일을 개별적인 CSS 파일로 만들어 연결할 수 있지만, 기본적으로는 모듈이 아니기 때문에 전역으로 적용되어, 선택자만 일치하면 의도치 않게 엉뚱한 다른 컴포넌트 요소에 스타일이 적용될 수도 있습니다.\n다음 예제는 `Hello.tsx`를 위해 작성한 스타일(`Hello.css`)이 `World.tsx`에도 적용되는 것을 보여줍니다.\n\n```tsx --path=/src/components/Hello.tsx\nimport './Hello.css'\n\nexport default function Hello() {\n return

Hello

\n}\n```\n\n```css --path=/src/components/Hello.css\n.title {\n color: red;\n}\n```\n\n```tsx --path=/src/components/World.tsx --line-active=2-3\nexport default function Hello() {\n // 빨간색 글자 색상이 적용됨!\n return

World

\n}\n```\n\n```tsx --path=/src/App.tsx\nimport Hello from '~/components/Hello'\nimport World from '~/components/World'\n\nexport default function App() {\n return (\n <>\n \n \n \n )\n}\n```\n\n![World.tsx의 .title 요소에도 스타일이 적용](https://somwpkzlplaovldnfahk.supabase.co/storage/v1/object/public/heropy.dev_posts/OidQSe/s2.jpg)\n\nReact에서는 효율적으로 스타일을 관리하기 위해, 각 컴포넌트에만 개별적으로 대응하는 스타일을 만들 수 있습니다.\n`Hello.css` 파일 이름을 `Hello.module.css`로 수정하면, 특정 컴포넌트에서만 유효한(Scoped) 스타일을 작성할 수 있습니다.\n\n/// message-box --icon=info\n화면에 출력하면, `.title` 선택자가 `._title_7f5lv_1`과 같이 새로운 선택자로 바뀌어 적용되는데, `_7f5lv_1`과 같이 선택자에 추가되는 접미사를 스타일 해시(Style Hash)라고 합니다.\n///\n\n```tsx --path=/src/components/Hello.tsx\nimport styles from './Hello.module.css'\n\nexport default function Hello() {\n return

Hello

\n}\n```\n\n```css --path=/src/components/Hello.module.css\n.title {\n color: red;\n}\n```\n\n![Hello.tsx의 .title 요소만 스타일이 적용](https://somwpkzlplaovldnfahk.supabase.co/storage/v1/object/public/heropy.dev_posts/OidQSe/s1.jpg)\n\n#### SCSS 구성\n\nVite 프로젝트는 `sass` 패키지만 설치하면, 별도 구성 없이도 바로 Sass 혹은 SCSS를 사용할 수 있습니다.\n특히 SCSS 중첩(Nesting) 문법을 사용하면, 훨씬 유연하게 스타일을 관리할 수 있습니다.\n\n```bash\nnpm i -D sass\n```\n\n```tsx --path=/src/components/Hello.tsx\nimport styles from './Hello.module.scss'\n\nexport default function Hello({ message = '' }) {\n return (\n <>\n

\n Hello Component~\n

\n {message}\n

\n \n )\n}\n```\n\n```scss --path=/src/components/Hello.module.scss\n.title {\n font-size: 40px;\n span {\n font-weight: bold;\n color: royalblue;\n } \n}\n.message {\n font-size: 20px;\n opacity: .7;\n}\n```\n\n#### 전역 스타일\n\n만약 모듈 안에서 일부 전역 스타일을 적용하고 싶다면, 다음과 같이 `:global` 선택자를 사용할 수 있습니다.\n\n```css --path=/src/components/Hello.module.css\n.title {\n font-size: 40px;\n span {\n font-weight: bold;\n color: royalblue;\n } \n}\n:global .message {\n font-size: 20px;\n opacity: .7;\n}\n```\n","isPublished":true,"isDeleted":false,"group":"React","tags":["React","TypeScript"],"comments":0,"image":"https://somwpkzlplaovldnfahk.supabase.co/storage/v1/object/public/heropy.dev_posts/QduRma/main.jpg","description":"React 기본 문법의 다양한 사용 패턴을 TypeScript 활용과 함께 살펴봅니다.","postname":"react-core-patterns-with-typescript","video":[],"like":0,"embeddedAt":"2026-03-05T08:44:14.655Z","indexedAt":null}