์ด ๊ธ์ udemy์ React ์๋ฒฝ ๊ฐ์ด๋ with Redux, Next.js, TypeScript ๊ฐ์ข๋ฅผ ๋ฐํ์ผ๋ก ์ ๋ฆฌํ ๋ด์ฉ์ ๋๋ค.
108. ๋ชจ๋ ์๊ฐ
- JSX Limitations & Fragments
- Getting a Cleaner DOM with Portals
- Working with Refs
109. JSX ์ ํ ์ฌํญ ๋ฐ ํด๊ฒฐ ๋ฐฉ๋ฒ
๋ฐํํ๊ฑฐ๋ ์์์ ์ ์ฅํ๋ ๊ฐ์ ํ๋์ฌ์ผ ํ๋ค.
1. div tag ์ฌ์ฉํ๊ธฐ
return (
<div>
{error && (
<ErrorModal
title={error.title}
message={error.message}
onConfirm={errorHandler}
/>
)}
<Card className={classes.input}>
<form onSubmit={addUserHandler}>
<label htmlFor="username">Username</label>
<input
id="username"
type="text"
value={enteredUsername}
onChange={usernameChangeHandler}
/>
<label htmlFor="age">Age (Years)</label>
<input
id="age"
type="number"
value={enteredAge}
onChange={ageChangeHandler}
/>
<Button type="submit">Add User</Button>
</form>
</Card>
</div>
2. ๋ค์ดํฐ๋ธ JS array ์ฌ์ฉํ๊ธฐ
return [
error && (
<ErrorModal
title={error.title}
message={error.message}
onConfirm={errorHandler}
/>
),
<Card className={classes.input}>
<form onSubmit={addUserHandler}>
<label htmlFor="username">Username</label>
<input
id="username"
type="text"
value={enteredUsername}
onChange={usernameChangeHandler}
/>
<label htmlFor="age">Age (Years)</label>
<input
id="age"
type="number"
value={enteredAge}
onChange={ageChangeHandler}
/>
<Button type="submit">Add User</Button>
</form>
</Card>,
];
→ ๋ฐฐ์ด์ ๋ฐํํ ์ ์๋ ์ด์ ๋ ๋ฆฌ์กํธ JSX ์์์ ๋ฐฐ์ด์ ๋ค๋ฃฐ ์ ์๊ธฐ ๋๋ฌธ์ด๋ค.
→ ํ์ง๋ง ์ ๋ฐฉ๋ฒ ์ฌ์ฉ์ ๊ฒฝ๊ณ ๊ฐ ๋์จ๋ค. JSX ์์์ธ ๋ฐฐ์ด๋ก ์์ ํ ๋๋ง๋ค react๋ ๋ชจ๋ ์์์ ๋ํ key๋ฅผ ํ์๋ก ํ๊ธฐ ๋๋ฌธ์ด๋ค.
๋ฌธ์
- ๋ถํ์ํ div๋ค์ด ๋ชจ๋ ์ค์ DOM์ผ๋ก ๋ ๋๋ง ๋๋ค. ํ์ด์ง์ ์ด๋ค ์๋ฏธ๋, ๊ตฌ์กฐ์ ์ธ ์๋ฏธ๋ ๊ฐ์ง ์์์๋ ๋ถ๊ตฌํ๊ณ !
- In bigger apps, you can easily end up with tons of unnecessary <div>s (or other elements) whick add no sematic meaning or structure to the page but are only there because of React's/JSX' requirement.
- ๋๋ฌด ๋ง์ html ์์๋ฅผ ๋๋๋งํ๋ฉด ๊ถ๊ทน์ ์ผ๋ก ์ ํ๋ฆฌ์ผ์ด์ ์ด ๋๋ ค์ง ๊ฒ์ด๋ค.
111. ๋ฆฌ์กํธ fragment
- It is an empty wrapper component: It doesn't render any real HTML element to the DOM. But it fulfills React's/JSX' requirement.
return (
<React.Fragment>
<h2>Hi there!</h2>
</React.Fragment>
);
return (
<>
<h2>Hi there!</h2>
</>
);
112. ๋ฆฌ์กํธ Portal ์๊ฐ
- ์คํ์ผ๋ง๋ง ์ ๋๋ก ํ๋ค๋ฉด, modal์ ๋ฌธ์ ๊ฐ ์๋ค. ํ์ง๋ง "Semantically" ๊ด์ ์ด๋ "clean HTML structure" ๊ด์ ์ผ๋ก ๋ณด๋ฉด ๋ณ๋ก ์ข์ง ์๋ค. ๊ธฐ๋ณธ์ ์ผ๋ก modal์ ํ์ด์ง ์์ ํ์๋๋ overlay์ด๊ธฐ ๋๋ฌธ. ์ด ๋ชจ๋ฌ์ด ๋ค๋ฅธ Html ์ฝ๋ ์์ ์ค์ฒฉ๋์ด ์๋ค๋ฉด ๊ธฐ์ ์ ์ผ๋ก๋ ์คํ์ผ๋ง ๋๋ฌธ์ ์ ์๋ํ ์ง๋ ๋ชฐ๋ผ๋ ์ข์ ์ฝ๋๋ ์๋๋ค. ์ข์ ๊ตฌ์กฐ๋ ์๋๋ค.
- ๋ฆฌ์กํธ์์๋ Portals ์ ์ฌ์ฉํ๋ฉด, overlay ๋ด์ฉ์ด ์๋ modal์ด ๊น๊ฒ ์ค์ฒฉ๋๋ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ์ ์๋ค!
113. Portal ์์ ํ๊ธฐ
- ๋ฆฌ์กํธ dom์ ๋ธ๋ผ์ฐ์ ์ ๋ํ ๋ฆฌ์กํธ์ฉ ์ด๋ํฐ์ ์ผ์ข ์ด๋ผ ํ ์ ์๋ค.
- ๋ฆฌ์กํธ์ ์ํด ์ด๋ฏธ ๋๋๋ง ๋ ๊ธฐ์กด ์ ํ๋ฆฌ์ผ์ด์ ๋ด๋ถ๋ก ํฌํธ์ํจ๋ค. ์ฆ ๋ ๋๋ง ํ๋ ค๋ HTML ๋ด์ฉ์ ๋ค๋ฅธ ์ฅ์๋ก ์ด๋์ํค๋ ๊ฒ!
114. "ref" ๋ก ์์ ํ๊ธฐ
- ref๋ ์ฐธ์กฐ (reference)๋ฅผ ๋ปํ๋ค. ๋ค๋ฅธ DOM ์์์ ์ ๊ทผํด์ ์ด๋ฅผ ํตํด ์์ ํ ์ ์๋๋ก ํด์ฃผ๋ ๊ฒ์ด๋ค. ํ์ฌ AddUser ์ปดํฌ๋ํธ์์๋ ๋งค๋ฒ ๋ฒํผ์ ๋๋ฅผ ๋๋ง๋ค state๊ฐ ์ ๋ฐ์ดํธ ๋๋ค. ์ฌ์ฉ์๋ก๋ถํฐ ์ป์ ๊ฐ์ ์ ๋ฐ์ดํธํ๊ณ , ๊ทธ๊ฒ์ state์ ์ ์ฅํ๊ณ , ๊ทธ state๋ฅผ input์ ๋ค์ ์ค๋ค. ๊ทธ๋ฆฌ๊ณ ์ด state ๋ฅผ ์ฌ์ฉํ์ฌ input์ ์ฌ์ค์ ํ๊ณ ๋ฐ์ดํฐ๊ฐ ํ์ํ ๊ณณ์ผ๋ก ๋ณด๋ด๊ธฐ๋ ํ๋ค. ์ด๋ ๊ฒ ๊ด๋ฆฌํด๋ ์ข์ง๋ง, form์ ์ ์ถํ ๋๋ง ํ์ํ๋ฐ๋ key๋ฅผ ์ ๋ ฅํ ๋๋ง๋ค state๋ฅผ ์ ๋ฐ์ดํธํ๋ ๊ฑด ์ฝ๊ฐ ๊ณผํ๋ค. ์ด๋ด ๋ ref๋ฅผ ์ฌ์ฉํ ์ ์๋ค!
- useRef๋ผ๋ hook์ ์ฌ์ฉํ์ฌ ref๋ฅผ ์์ฑํ ์ ์๋ค.
const nameInputRef = useRef();
const ageInputRef = useRef();
<input
id="username"
type="text"
value={enteredUsername}
onChange={usernameChangeHandler}
ref={nameInputRef}
/>
console.log(nameInputRef);
→ There is a object being output here and that object has a current property. Now, that's important. This ref value, which is being generated here always is an object, whcich always has a current prop and the current prop holds the actual value that ref is connected with
console.log(nameInputRef.current.value);
→ value ๊ฐ ํ์ธ์ด ๊ฐ๋ฅํ๋ค! ์ ๋๊ฐ์ ref ์ฌ์ฉ์ผ๋ก ์ธํด usernameChageHandler, ageChangeHandler, ๊ด๋ จ state๋ฅผ ์ญ์ ํด๋ ์ฌ๋ฐ๋ฅด๊ฒ ๋์ํ๋ค. ํ์ง๋ง addUser ์ reset๋๋ ๋ก์ง ์ฌ๋ผ์ง๋ค.
nameInputRef.current.value = "";
ageInputRef.current.value = "";
→ ๋ค์ ์ฝ๋๋ฅผ ํตํด reset๋ฅผ ์์ผ์ฃผ๋ฉด ๋๋ค :)
๊ทธ๋์ state, ref ๋ญ๊ฐ ๋ ์ข์๊น?
- ์๋ฅผ ๋ค์ด value๋ฅผ ๋น ๋ฅด๊ฒ ์ฝ๊ณ ์ถ์ ๋๊ฐ ์๋ค. ๊ฐ๋ง ์ฝ๊ณ ์ถ๊ณ ์๋ฌด๊ฒ๋ ๋ฐ๊ฟ ๊ณํ์ด ์๋ค๋ฉด state๋ ํ์ํ์ง ์๋๋ค. ์ด๋ด ๊ฒฝ์ฐ์๋ ref ์ฌ์ฉ์ด ๋ ๋์ ๊ฒ.
- ํ์ง๋ง ํ์ฌ ์ฐ๋ฆฌ์ ์ผ์ด์ค์์๋ ์ํ๋๋๋ก ์ ํํ๋ฉด ๋๋ค. ref๊ฐ ์ฝ๋๊ฐ ์ ๊ธด ํ์ง๋ง DOM์ ์กฐ์ํ๋ค๋ ์์ธ์ ์ธ ์ผ์ ํด์ผ ํ๊ณ , state๋ ํ์คํ ๋ ๊น๋ํ์ง๋ง ์ฝ๋๋ฅผ ๋ ๋ง์ด ์ฌ์ฉํด์ผ ํ๋ค.
115. controlled ์ปดํฌ๋ํธ์ uncontrolled ์ปดํฌ๋ํธ
- controlled component : state ์ฌ์ฉ
- uncontrolled component : ref