[React] 리엑트 핵심정리!
⭐React 작동 흐름
1️⃣HTML 진입점 ( index.html )
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>- 브라우저가 HTML을 읽을 때 id="root"인 "div"를 DOM에 생성하고 main.tsx파일을 모듈로 불러온다.
2️⃣main.tsx - React 앱 진입점
import { createRoot } from 'react-dom/client'
import App from './App'
createRoot(document.getElementById('root')!).render(<App />)
- document.getElementById('root')로 위 HTML의 div#root를 DOM에서 가져옴
- createRoot(...).render(<App />)는 그 안에 React 앱(컴포넌트 트리의 루트) 를 렌더링
3️⃣App.tsx - 최상단 컴포넌트
export default function App() {
return <div>Hello React</div>
}- 여기서부터 자식 컴포넌트들을 렌더링하고 상태 관리, 이벤트 처리 등을 진행한다.
<></> Fragment
💡리엑트는 여러 최상위 요소를 지정할 수 없다.
React는 하나의 최상위 요소만 지정해야 한다. 별도의 div와 같은 요소를 생성하지 않고 여러 요소를 하나로 묶어 처리할 수 있도록 Fragment를 사용하면 된다.
export default function App() {
return (
<>
<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>
</>
)
}
테이블을 사용할 때 `<div>` 태그를 사용하면 테이블 구조가 깨지는데, Fragment를 사용하면 된다.
function TableRow() {
return (
<>
<td>Cell 1</td>
<td>Cell 2</td>
</>
);
}
묵시적으로 `<></>`를 사용할 수 있지만 명시적으로 key 값을 넣어줘야 할 때가 있다. Fragment에 커스텀한 속성을 추가하고 싶을 때 고유한 key 값을 넣어 사용할수도 있다. `<Fragment key={fruit.id}>`
데이터 보간
`{}` 중괄호로 묶어 데이터를 표현 하는 방법을 보간법(Interpolation)이라 한다. `{name}`
export default function App() {
const name = 'JINS'
return (
<h1>Hello, {name}!</h1>
)
}
Hot Module Replacement(HMR)
- 개발 중 특정 코드 변경 시, 페이지 새로고침 없이 해당 부분만 리로드하는 것을 의미한다. 개발모드에서만 사용된다.(변경된 모듈: Hot Module)
- 코드가 변경 후 저장을 누르더라도, state 를 유지시켜준다.
- 리엑트 실습할 때 바로 실시간으로 화면 적용 시켜주던 것~
반응형 데이터, 이벤트 핸들링
import { useState, useMemo, useEffect } from 'react'
// 반응형 데이터 선언
const [데이터이름, 데이터변경함수] = useState<데이터타입>(기본값)
// 반응형 데이터 변경
데이터변경함수(변경할값)
// 계산된 데이터 선언
const 계산된데이터 = useMemo(() => 새로운값, [기반데이터])
// 데이터 감시 선언
useEffect(실행할함수, [감시할데이터])
// useEffect 예시
useEffect(() => {
console.log('count 값이 변경되었습니다:', count)
}, [count])
// useEffect는 최초 한번(컴포넌트 함수가 화면에 연결된 직후)을 무조건 실행함
useEffect(() => {
inputRef.current?.focus() // ?. 뜻 : 되면 뒤에 거 실행, 안 되면 실행 x
}, [])
반응형 데이터 `useState` !
정보를 저장해서 사용하고 싶으면 `useMemo` !
데이터 감시 `useEffect`
use + Xxx = 훅(Hooks)
이벤트 핸들링 on + Click
import { useState, useMemo } from 'react'
export default function App() {
const [count, setCount] = useState(0)
const double = useMemo(() => count * 2, [count])
return (
<>
<h2>count:{count}</h2>
<h2>double:{double}</h2>
<button onClick={() => setCount(count + 1)}>증가</button>
</>
)
}
🔨 MAC 에서 한글 입력 시 두 번 입력되는 버그 발생 !!
영어는 a,b,c 이렇게 한 글자씩 입력하면 되는데 한글(일본어, 중국어) 등 같은 경우 자음 모음을 조합해서 한 글자가 만들어 진다. 예를 들어 공 = ㄱ + ㅗ + ㅇ 이렇게 키보드 3번 입력해야 한 단어가 만들어진다(영어는 a 한 번만 enter 누르면 되는데..)
아직 조합이 끝나지 않았는데도 Enter 이벤트가 발새앻서 두 번 실행되거나 의도치 않은 입력 처리가 발생되기에 아직 문자를 조합중일 때에는 실행되지 않게 막아야 한다. 고것이 ` !event.nativeEvent.isComposing` 으로 막으면 된다.
if (event.key === 'Enter' && !event.nativeEvent.isComposing) {
// 조합이 끝났을 때만 실행
}
조건부 렌더링
표현식(논리, 삼항 연산자)는 템플릿에 직접 사용 가능하고 구문(if, switch)는 안된다.
예시 : `{message.trim() && <div>입력된 내용이 있어요~</div>}`
- 논리 연산자 : 한 개의 조건 처리
- 삼항 연산자 : 두 개의 조건 처리
- 복잡한 조건 : 여러 개의 조건 처리(if문, switch문)
reference