
Cannot read property '0' of undefined ๐คฌ
Mockup ๋ฐ์ดํฐ๋ฅผ ๊ตฌ์ฑํ์ฌ importํ๊ฑฐ๋ ํ๋ก์ ํธ๊ฐ ์์๋๊ณ ๋ฐฑ์๋ API๋ฅผ ๋ถ์ด๊ธฐ ์์ํ๋ฉด์ ์์ฃผ ์ง๋ฌธํ๋ ์๋ฌ ์ค ํ๋์
๋๋ค.
์ด ์๋ฌ๋ Component Lifecycle๊ณผ ๊ด๋ จ์ด ์๋๋ฐ, ์ด๋ฒ ๊ธ์์๋ Component Lifecycle๊ณผ ์ด๋ก ์ธํด ๋ฐ์ํ๋ ์๋ฌ์ ์์ธ๊ณผ ํด๊ฒฐ ๋ฐฉ๋ฒ์ ๋ํด ์์๋ณด๊ฒ ์ต๋๋ค.
Lifecycle
- ์ฐ์ ๊ธฐ๋ณธ์ ์ธ Lifecycle ๋ฉ์๋ ์คํ ์์์ ๋ํด ์์๋ณด๊ฒ ์ต๋๋ค.

- ์์ ์ฝ๋ ์คํ ๊ฒฐ๊ณผ ์ฝ์์ ์ฐํ ํ๋ฉด์
๋๋ค.

๐ Lifecycle ๊ธฐ๋ณธ ์์
- constructor
- render
- componentDidMount
- (fetch ์๋ฃ)
- render
- (setState)
- componentDidUpdate (setState ๋์๊ธฐ ๋๋ฌธ์ ์ปดํฌ๋ํธ ์
๋ฐ์ดํธ ๋ฐ์)
๐ ์ด ์์๋ฅผ ๊ผญ ๊ธฐ์ตํด์ฃผ์ธ์! ์ด ์์๋ก ์ธํด ๋ฐ์ํ๋ ์๋ฌ๋ฅผ ํ๋์ฉ ์ดํด๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค.
๐ฅ ์ฐธ๊ณ ) fetch๋ก ๋ถ๋ฌ์ค๋ ๋ฐ์ดํฐ๋ ์๋์ ๊ฐ์ด ์๊ฒผ์ต๋๋ค.
{
"data": [{ "index": 1, "name": "joon" }]
}
1. render ํจ์ ์์ this.state.data


- ํ๋ฉด์ ์๋ฌ ์์ด ๊ฒฐ๊ณผ๊ฐ ์ ๋ํ๋ฉ๋๋ค.
- ์ฒ์ render ํจ์๊ฐ ์คํ๋ ๋๋ componentDidMount ์ด์ , ์ฆ setState๋๊ธฐ ์ ์ด๊ธฐ ๋๋ฌธ์ this.state.data๊ฐ ๋น ๋ฐฐ์ด๋ก ์ฐํ๋ ๊ฒ์ ํ์ธํ ์ ์์ต๋๋ค.
- componentDidMount ์ดํ, ์ฆ setState ์ดํ์ render ํจ์์์๋ this.state.data๊ฐ ๋ฐ์ดํฐ์์ ๋ฐ์ ๋ฐฐ์ด์ ์ ๋ฐ์ํ์ฌ ๋์ค๋ ๊ฒ์ ํ์ธํ ์ ์์ต๋๋ค.
- ๊ทธ๋ผ ์ด๋ฒ์๋ ๋ฐ์ดํฐ ์์ ๊ฐ์ฒด์ ์ข ๋ ์ ๊ทผํ๊ธฐ ์ํด this.state.data๊ฐ ์๋ this.state.data[0]์ ์ฝ์์ ์ฐ์ด๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค.
2. render ํจ์ ์์ this.state.data[0]


- ์ด๋ฒ์๋ ํ๋ฉด์ ์๋ฌ ์์ด ๊ฒฐ๊ณผ๊ฐ ์ ๋ํ๋ฉ๋๋ค.
- this.state.data๊ฐ ๋น ๋ฐฐ์ด์ธ ๊ฒฝ์ฐ์๋ this.state.data[0] ์ ๊ทธ๋ฅ undefined๋ก ๋์ค๊ธฐ ๋๋ฌธ์ ์๋ฌ๊ฐ ๋ฐ์ํ์ง ์๊ณ ๊ทธ ๋ค์์ componentDidMount ํจ์๊ฐ ์คํ๋๋ ๊ฒ์ ๋ณผ ์ ์์ต๋๋ค.
- ๊ทธ๋ผ ์ด๋ฒ์๋ ๋ฐ์ดํฐ ์์ ๊ฐ์ฒด์ name value์ ์ ๊ทผํ๊ธฐ ์ํด this.state.data[0]์ด ์๋ this.state.data[0].name ์ ์ฝ์์ ์ฐ์ด๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค.
3. render ํจ์ ์์ this.state.data[0].name


- Cannot read property 'name' of undefined ๐คฌ
- ์๋ฌ๊ฐ ๋ฐ์ํ๋ค์! ์ ๊ฐ์๊ธฐ ์ด๋ฌ๋์ง ์ดํด๋ณด๊ฒ ์ต๋๋ค.
- constructor
- render
- console.log("render") >>> ๋ฌธ์ ์์
- console.log(this.state.data[0].name) >>> ๐ฅ__์๋ฌ ๋ฐ์__
- ๋น ๋ฐฐ์ด์ธ๋ฐ ์ด๋ป๊ฒ name์ด๋ผ๋ ํค ๊ฐ์ ๊ฐ์ง ์ ์์๊น์?
- ๋น ๋ฐฐ์ด์ 0๋ฒ์งธ index, ์ฆ this.state.data[0] ์ undefined์ด๊ธฐ ๋๋ฌธ์ ์์ ๊ฐ์ ์๋ฌ๊ฐ ๋ฐ์ํ๊ฒ ๋ฉ๋๋ค.
โ ํด๊ฒฐ๋ฐฉ๋ฒ
AND ์ฐ์ฐ์(&&)๋ฅผ ์ฌ์ฉํ ์กฐ๊ฑด๋ถ ๋ ๋๋ง
- ํน์ ์กฐ๊ฑด์ ๋ง์กฑํ ๋ ๋ด์ฉ์ ๋ณด์ฌ์ฃผ๊ณ , ๋ง์กฑํ์ง ์์ ๋ ์๋ฌด๊ฒ๋ ๋ ๋๋งํ์ง ์์์ผ ํ๋ ์ํฉ์์๋ ์กฐ๊ฑด๋ถ ์ฐ์ฐ์๋ฅผ ํตํด ๊ตฌํํ ์ ์์ต๋๋ค.
- ์ฝ๋๋ฅผ ์ดํด๋ณด๊ฒ ์ต๋๋ค.

- ๋นจ๊ฐ์ ํ์๋ ๋ถ๋ถ์ ํด์ํด๋ณด๋ฉด "this.state.data[0] ์ด true ์ธ ๊ฒฝ์ฐ์๋ง this.state.data[0].name์ ๋ ๋ํ๊ฒ ๋ค" ๋ผ๋ ๋ป ์
๋๋ค.
- ์ด๋ ๊ฒ ๋ฐ์ดํฐ๋ฅผ ๋ฐ์์ ๋ฌด์กฐ๊ฑด ๋ ๋๋ง ํ๋ ๊ฒ์ด ์๋๋ผ, ์กฐ๊ฑด์ ๊ฑธ์ด์ ๋ด๊ฐ ์ํ๋ ๋ฐ์ดํฐ๊ฐ ์๋ ๊ฒฝ์ฐ์๋ง ๋ ๋๋ง์ ์์ผ์ฃผ๋ ๋ฐฉ๋ฒ์ผ๋ก ์๋ฌ๋ฅผ ํด๊ฒฐํ ์ ์์ต๋๋ค.
๋ถ๋ชจ - ์์ ๋ฐ์ดํฐ ์ ๋ฌ ์ ๋ฐ์ํ๋ ์ค๋ฅ
- ๋ค์์ ์ด์ ๊ด๋ จํด์ ์์ฃผ ๋ฐ์ํ๋ ์ค๋ฅ๋ฅผ ํ๋ ๋ ๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค.
- ๋ถ๋ชจ๊ฐ API์์ ๋ฐ์ ๋ฐ์ดํฐ๋ฅผ ์์์๊ฒ props ๊ฐ์ผ๋ก ์ ๋ฌํ์ฌ ์์ ๋ด๋ถ์์ ๊ทธ ๋ฐ์ดํฐ์ ์ ๊ทผํ์ฌ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ์
๋๋ค.
- ์๋ฆฌ๋ ์์์ ๋ณธ ๋ด์ฉ๊ณผ ๊ฐ์ต๋๋ค.
- ์ฝ๋๋ฅผ ๋จผ์ ๋ณด๊ณ ๋ถ๋ชจ - ์์ Lifecycle ์์๋ฅผ ๋จผ์ ํ์ธํด๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค.



๐ ๋ถ๋ชจ - ์์ Lifecycle ์์
- ๋ถ๋ชจ constructor
- ๋ถ๋ชจ render (๋ถ๋ชจ render ์์ ์๋ ์์ ์ปดํฌ๋ํธ๋ก ๋์ด๊ฐ)
- ์์ constructor
- ์์ render
- ์์ componentDidMount (์ฌ๊ธฐ๊น์ง ํ๊ณ ๋ถ๋ชจ ์ปดํฌ๋ํธ๋ก ๋ค์ ๋์ด๊ฐ)
- ๋ถ๋ชจ componentDidMount
- ๋ถ๋ชจ fetch ์๋ฃ (setState ๋ฐ์ > ์
๋ฐ์ดํธ ๋ฐ์ > ๋ค์ render)
- ๋ถ๋ชจ render (๋ถ๋ชจ render ์์ ์๋ ์์ ์ปดํฌ๋ํธ๋ก ๋์ด๊ฐ)
- ์์ render
- ์์ componentDidUpdate
(componentDidMount๋ ์ต์ด ๋ ๋ ์ ํ ๋ฒ๋ง ์คํ๋๊ธฐ ๋๋ฌธ์ componentDidUpdate ๋ฐ์. ์ฌ๊ธฐ๊น์ง ํ๊ณ ๋ค์ ๋ถ๋ชจ๋ก ๋์ด๊ฐ.)
- ๋ถ๋ชจ componentDidUpdate
(componentDidMount๋ ์ต์ด ๋ ๋ ์ ํ ๋ฒ๋ง ์คํ๋๊ธฐ ๋๋ฌธ์ componentDidUpdate ๋ฐ์)
-
๊ทธ๋ผ ์๋ฌ๋ฅผ ๋ฐ์์ํค๋๋ก ํ๊ฒ ์ต๋๋ค.

-
์ ์๋ฌ๊ฐ ๋ฐ์ํ๋์ง ์์๊ฒ ์ฃ ?๐ ๋ง์ฐฌ๊ฐ์ง๋ก ํด๊ฒฐ ๋ฐฉ๋ฒ ์ดํด๋ณด๊ฒ ์ต๋๋ค.

-
์์ ๋ด๋ถ์์ ์กฐ๊ฑด๋ถ ๋ ๋๋ง์ ํ์ฉํ์ฌ ์๋ฌ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ์ต๋๋ค๐
์ค์๋์งฑ