๐์๋ก ์๊ฒ ๋ ๊ฒ
<๋ฆฌ์กํธ>
-useEffect๋ ํด๋์ค์ ์๋ช ์ฃผ๊ธฐ ํจ์์ ์ญํ ์ ํ๋ค. ์ผ๋ฐ์ ์ผ๋ก ์ฌ์ฉํ ๋ ๊ฒฝ์ฐ์ ๋ฐ๋ผ componentDidMount, componentDidUpdate ํจ์์ ์ญํ ์ ํ๊ณ ๋ง์ฝ componentWillUnmont์ ์ญํ ์ ์ํ๋ค๋ฉด useEffect์ return ๊ฐ์ผ๋ก ํธ์ถํ๋ฉด ๋๋ค. useEffect์ return ๊ฐ์ ์ปดํฌ๋ํธ๊ฐ ์ธ๋ง์ดํธ ๋ ๋ ํธ์ถ๋๋ค.
-Hook์ ๊ท์น
:Hook์ ๋ฌด์กฐ๊ฑด ์ต์์ ๋ ๋ฒจ์์ฌ๋ ํธ์ถํด์ผ ํ๋ค. ๋ฐ๋ณต๋ฌธ์ด๋ ์กฐ๊ฑด๋ฌธ, ์ค์ฒฉ๋ ํจ์ ๋ฑ์์๋ ํธ์ถํ๋ฉด ์ ๋๋ค.
:๋ฆฌ์กํธ ํจ์ ์ปดํฌ๋ํธ์์ํ Hook์ ํธ์ถํ ์ ์๋ค.
-if...else๋ฅผ ํตํด ์กฐ๊ฑด๋ถ ๋ ๋๋ง์ ํ ์ ์๋ค.
-Inline Conditions
:์กฐ๊ฑด๋ฌธ์ ์ฝ๋ ์์ ์ง์ด๋ฃ๋ ๊ฒ
-inline if : && ์ฐ์ฐ์๋ฅผ ์ด์ฉํ๋ค.
...
return (
<div>
<h1>์๋
ํ์ธ์!</h1>
{unreadMessages.length > 0 &&
<h2>
ํ์ฌ {unreadMessages.length}๊ฐ์ ์ฝ์ง ์์ ๋ฉ์์ง๊ฐ ์์ต๋๋ค.
</h2>
}
</div>
);
-inline if-else : ?์ฐ์ฐ์๋ฅผ ์ด์ฉํ๋ค.
...
<div>
์ด ์ฌ์ฉ์๋ ํ์ฌ <b>{props.isLoggedIn ? '๋ก๊ทธ์ธ' : '๋ก๊ทธ์ธํ์ง ์์'}</b> ์ํ์
๋๋ค.
</div>
...
๐ญ๋ฐฐ์ด ์
๋ฆฌ์กํธ์์ ๋ณ ๋ค๋ฅธ ์๊ฐ์์ด ์ฌ์ฉํ๋ ๊ธฐ๋ฅ๋ค์ ๋ํ ์ ํํ ๋ช ์นญ๊ณผ ์ฌ์ฉ๋ฒ์ ์๊ฒ ๋์๋ค. ๋์ถฉ ์ด๋ฐ ๊ฑฐ๊ฒ ์ง ํ๊ณ ์ฌ์ฉํ๊ณ ์์๋๋ฐ ์ด์ ๋ํ ๊ฐ๋ ์ ๋ฐฐ์ธ ์ ์์ด์ ์ข์๋ค. ์ง๊ธ๊น์ง ์ฃผ๋ก useEffect์ useState Hook๋ง ์ฌ์ฉํด๋ณด์๋๋ฐ ์ด ์ธ์ ๋ค์ํ Hook์ ์๊ฒ ๋์๋ค. ์ด์ ๋ํด ์ข ๋ ์ฐพ์๋ณด๋ฉด์ ํฌ์คํ ํ์ฌ ๊ฐ๋ ๊ณผ ์ฌ์ฉ๋ฒ์ ๋ํด ๋ ์์ธํ ๊ณต๋ถํด๋ด์ผ ํ ๊ฒ ๊ฐ๋ค.
๐ฐ๊ฐ์ ํ ์
-์ค๋์ ์คํ ์ฝ์์ด ์์ด์ ์๊ฐ ์์ ๊ฐ์๋ฅผ ๋๋ด๋ ค๊ณ ํ๋ค๋ณด๋ ๋ชปํ์ง๋ง ๋ชจ๋ฅด๋ ๋ด์ฉ์ด๋ ๋ ์๊ณ ์ถ์ ๋ด์ฉ์ด ์์ผ๋ฉด ๊ฐ์ ์ง๋๋ฅผ ๋ฉ์ถ๊ณ ๊ทธ๋๊ทธ๋ ์ฐพ์๋ณด๊ณ ๊ธฐ์ตํ๋ ๊ฒ์ด ์ข์ ๊ฒ ๊ฐ๋ค.
-์ง๊ธ๊น์ง ์ค์ตํ ๊ฒ๋ค์ ์กฐํฉํด์ ๋ญ๊ฐ ๋ง๋ค์ด๋ณด๋ฉด ์ข์ ๊ฒ ๊ฐ๋ค.
๐ป์์ผ๋ก ๋ฐฐ์ฐ๊ณ ์ถ์ ๊ฒ
-๊นํ๋ธ ์ฌ์ฉ๋ฐฉ๋ฒ ์ค์ตํ๊ธฐ
-cs์ง์ ๋ฐฐ์ฐ๊ธฐ
-html, css ๋ณต์ต
'์ผ์ > Today I Learned' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[๋ฐ๋ธ์ฝ์ค Day1] 2022.10.17 (0) | 2022.10.17 |
---|---|
2022.10.12 (0) | 2022.10.12 |
2022.10.10 (0) | 2022.10.10 |
2022.10.07 (0) | 2022.10.07 |
2022.09.29 (0) | 2022.09.29 |