#리액트 #코딩 #프로그래밍
React에서 컨텍스트 기능을 활용해 부모 컴포넌트의 state를 자식 컴포넌트에게 전달하는 방법에 대해 설명합니다. 'App', 'Child1', 'Child2' 식의 컴포넌트 구조를 예로 들며 이들 사이에 'CountContext'라는 컨텍스트를 생성해 'count' state와 그 값을 변경하는 함수를 전달할 수 있게 합니다. 이 과정에서 중간 컴포넌트인 'Child1'을 거치지 않고도 'Child2'에서 필요한 데이터를 가져올 수 있습니다.
반면 중간 단계인 'Child1'에서는 'count' state와 함수를 사용하지 않으므로 불필요한 코드가 줄어듭니다. 이는 컴포넌트의 재사용성을 높이고 유지 보수를 용이하게 합니다.
또한, 전체 컴포넌트 트리에서 'CountContext' 값이 변경될 때 해당 컨텍스트에서 정보를 가져오는 모든 컴포넌트가 리렌더링된다는 설명과 함께, 컴포넌트들이 많아질 경우 불필요한 리렌더링을 방지하기 위해 여러개의 컨텍스트를 분리하여 사용하는 방법에 대해 설명합니다.
이후에는 'ToggleContext'라는 또 다른 컨텍스트를 생성해 'isOn' state와 그 상태를 토글하는 함수를 제공, 두 컨텍스트가 독립적으로 작동함을 보여주며, 컴포넌트들이 필요한 정보만 useContext 훅을 이용해 가져올 수 있다는 것을 설명합니다.
= = =
🏠 얄코사이트: https://www.yalco.kr
📖 얄코 도서: https://www.yalco.kr/book/
🧑🏫 얄코 강의: https://www.yalco.kr/#lectures
🎥 제대로 파는 Git & GitHub: • 제대로 파는 Git & GitHub (대학생 전체강의 반값할인)
🎥 제대로 파는 자바: • 제대로 파는 자바 - Java 끝장내기
🎥 제대로 파는 파이썬: • 제대로 파는 파이썬 - Python 끝장내기
🎥 제대로 파는 자바스크립트: • (구판) 제대로 파는 자바스크립트 - 고정댓글에 새 버전 링크
🎥 제대로 파는 HTML & CSS: • 제대로 파는 HTML & CSS
🎥 갖고 노는 MySQL 강좌: • 왕초보용! 갖고 노는 MySQL 데이터베이스 강좌
🎥 반응형 프로그래밍 RxJS 강좌: • 반응형 프로그래밍이 뭔가요? (+ ReactiveX 강좌)
![[10분 테코톡] 멍구의 스프링@EventListener와 @TransactionalEventListener](https://i2.ytimg.com/vi/EzDjBEnatks/hqdefault.jpg)