컴포넌트의 개념 정리

개념을 정리하기위해 도화지라는 것을 통해 정리해보자

1. 흰색 도화지를 준비한다

2. 그 도화지안에 네모 박스를 그린다

3. 네모박스안에 작은 네모박스를 또 그린다

   이제 우리는 큰 도화지가 있고 그 도화지안에 작은 도화지가 있고

   작은도화지안에 또 작은 도화지가 있다

   이 흐름이 컴포넌트라고 생각해보자

   우리가 적은 값을 렌더를 통해 출력하는데

   렌더는 return이라는 것을 통해 그 속에 담겨있는 것을 전부 렌더링하게 되어있다

   만약 사용자가

   큰도화지안에 있는 네모박스에 사과를 그려놓고 그 네모박스안에 작은 도화지에는

   참외를 그렸다고 가정해보자

   그상태에서 사용자가 도화지에 그려둔 사과를 수박으로 바꿔주세요 라고 했을 경우

   큰도화지 > 작은도화지(사과) > 더 작은도화지(참외) 이런식으로

   참외는 사과라는 도화지안에 속해있고 사과는 큰도화지안에 속해있다

   이런식으로 서로 물려있는 상태에서

   사과→ 수박 이렇게 변경요청이 들어오면

   리액트에서는 리턴을 통해 수정 후 출력을 하는데

   사과→ 수박 해당 변경건만 렌더해서 출력하는 것이 아니라

   사과도화지안에 참외도화지까지 전부 렌더링을 돌리게 된다

   즉 <div> <div><div></div> </div> </div> 이렇게 디브 안에 또 디브가 있을 때

   우리는 디브안에 디브안에 디브를 수정을 원해도

   특정 디브만 수정하는게 아니라 전체를 렌더하게 된다

   하지만 컴포넌트를 통해서 도화지안에 도화지를 그리는 것이 아니라

   각 도화지를 3개를 준비하고

   A도화지 B도화지 C도화지를 준비해서

   각각 return값이 따로 있다면 원하는 요청을 해당 도화지에서만 처리하고

   가장 큰 도화지안에 작은 도화지를 넣고 작은도화지안에 더 작은 도화지를 넣으면

   해당하는 변경사항에 맞는 도화지에서만 수정 후 렌더할 수 있게 된다

   어렵게 적었지만 이게 컴포넌트의 개념이라고 볼 수 있다

   우리는 렌더를 할 때 연산을 하게 되는데 부모가 다시그려지면 자식들도

   전부 새로 그려질지 선택을 해야하는데 그럴때 필요한게 깊은 복사라는 것이다

   앞으로 더 공부해서 지금처럼 어렵게 설명하는 것이 아니라 더 이해하기 쉽게 개념을 적어봐야겠다