์ปดํฌ๋ํธ ๊ด๋ จ ์ง๋ฌธ์ด ์์ด์ ๋ฌธ์ ๋๋ฆฝ๋๋ค.~
๋ต๋ณ์ฃผ์
์ ๊ฐ์ฌํฉ๋๋ค.~ ์ฐ์ ์ถ๊ฐ๋ก ์ง๋ฌธ์ฌํญ์ ๋ง์๋๋ฆฌ๊ฒ ์ต๋๋ค.!์ปดํฌ๋ํธ ์ต์ ํ๋ฆฌ์ํธ์ shouldComponentUpdate ๋ ์ปดํฌ๋ํธ ์๋ช
์ฃผ๊ธฐ ์ธ๋ฐ ์ปดํฌ๋ํธ๊ฐ ์
๋ฐ์ดํธ ๋๊ธฐ ์ ์ ํธ์ถ๋๋ ์์ญ์
๋๋ค. shouldComponentUpdate ์์ return ์ boolean ์ผ๋ก ๋ฐ๊ฒ ๋๋๋ฐ ์ด๋ true ์ผ ๊ฒฝ์ฐ ์ปดํฌ๋ํธ๋ฅผ reRendering ํ๊ฒ ๋ฉ๋๋ค. ๊ด๋ จ ์์๋ก๋ shouldComponentUpdate(nextProps, nextState){ return this.props.item !== nextProps.item // item์ ๊ฐ์ด ์ค์ ๋ก ๋ณ๊ฒฝ๋์ด์ผ๋ง rerender ํ ์ ์๋๋ก}์
๋๋ค.๊ทธ๋์ ๋ณดํต ์ปดํฌ๋ํธ ๋ฐฐ์ด์ด ๋ ๋๋ง ๋๋ ๋ฆฌ์คํธ ์ปดํฌ๋ํธ ์ผ๋ ์ด์ ๊ฐ๊ณผ ์ดํ ๊ฐ์ด ์ค์ ๋ก ๋ฐ๋์ด์ผ๋ง ๋ ๋๋ง ํ๊ฒ ์ต์ ํ ์ค์ ์ ํด์ฃผ๋๋ก ํด์ผํ๋๋ฐ ๋ต๋ณ์ฃผ์ ๋ด์ฉ์ผ๋ก ๋ณด์์ vue๊ฐ ์๋์ผ๋ก ์ต์ ํ ํด์ฃผ๋๊ฒ์ผ๋ก ๋ณด์ด๋๊ตฐ์. ์์ฃผ ์ข์๊ฑฐ ๊ฐ์์.!Presentational and Container ๋ถ๋ถvue์์๋ ๊ฐ์ ๊ฐ๋
์ ์ฌ์ฉํ๋๊ฑฐ ๊ฐ๊ตฐ์. ์๋ ค์ฃผ์
์ ๊ฐ์ฌํฉ๋๋ค.!!์ ๊ทธ๋ฆฌ๊ณ ํ๋ ๋ ์ง๋ฌธ๋๋ฆด๊ฒ ์์ด์ ๋ฌธ์ ๋๋ฆฝ๋๋ค.React์์๋ ์์ Presentational and Container ๋ถ๋ถ ์ ๋๋๊ธฐ ์ํด ํด๋ ๊ตฌ์กฐ๋ฅผ container (Container ์ปดํฌ๋ํธ ๋๋ ํ ๋ฆฌ) component (Presentational ์ปดํฌ๋ํธ ๋๋ ํ ๋ฆฌ)๋ก ๊ถ์ฅํ์ฌ ์ฌ์ฉํ๊ณ ์๋๋ฐ vue์์๋ ํน์ ์ด๋ฅผ ๊ด๋ฆฌํ๋๋ก ํด๋ or ํ์ผ ๋ค์ด๋ฐ ๊ตฌ์กฐ๋ฅผ ๊ถ์ฅํ๋ ์ฌํญ์ด ์์๊น์?~์น์ ํ๊ณ ๋ช
์พํ ๋ต๋ณ ๊ฐ์ฌ๋๋ฆฝ๋๋ค.!!