컴포넌트의 개념 정리

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

1. 흰색 도화지를 준비한다
2. 그 도화지안에 네모 박스를 그린다
3. 네모박스안에 작은 네모박스를 또 그린다작은도화지안에 또 작은 도화지가 있다우리가 적은 값을 렌더를 통해 출력하는데만약 사용자가참외를 그렸다고 가정해보자큰도화지 > 작은도화지(사과) > 더 작은도화지(참외) 이런식으로이런식으로 서로 물려있는 상태에서리액트에서는 리턴을 통해 수정 후 출력을 하는데사과도화지안에 참외도화지까지 전부 렌더링을 돌리게 된다우리는 디브안에 디브안에 디브를 수정을 원해도하지만 컴포넌트를 통해서 도화지안에 도화지를 그리는 것이 아니라A도화지 B도화지 C도화지를 준비해서가장 큰 도화지안에 작은 도화지를 넣고 작은도화지안에 더 작은 도화지를 넣으면어렵게 적었지만 이게 컴포넌트의 개념이라고 볼 수 있다전부 새로 그려질지 선택을 해야하는데 그럴때 필요한게 깊은 복사라는 것이다
4. 앞으로 더 공부해서 지금처럼 어렵게 설명하는 것이 아니라 더 이해하기 쉽게 개념을 적어봐야겠다
5. 우리는 렌더를 할 때 연산을 하게 되는데 부모가 다시그려지면 자식들도
6. 해당하는 변경사항에 맞는 도화지에서만 수정 후 렌더할 수 있게 된다
7. 각각 return값이 따로 있다면 원하는 요청을 해당 도화지에서만 처리하고
8. 각 도화지를 3개를 준비하고
9. 특정 디브만 수정하는게 아니라 전체를 렌더하게 된다
10. 즉 <div> <div><div></div> </div> </div> 이렇게 디브 안에 또 디브가 있을 때
11. 사과→ 수박 해당 변경건만 렌더해서 출력하는 것이 아니라
12. 사과→ 수박 이렇게 변경요청이 들어오면
13. 참외는 사과라는 도화지안에 속해있고 사과는 큰도화지안에 속해있다
14. 그상태에서 사용자가 도화지에 그려둔 사과를 수박으로 바꿔주세요 라고 했을 경우
15. 큰도화지안에 있는 네모박스에 사과를 그려놓고 그 네모박스안에 작은 도화지에는
16. 렌더는 return이라는 것을 통해 그 속에 담겨있는 것을 전부 렌더링하게 되어있다
17. 이 흐름이 컴포넌트라고 생각해보자
18. 이제 우리는 큰 도화지가 있고 그 도화지안에 작은 도화지가 있고