portal (1) 썸네일형 리스트형 리액트 디자인 패턴 : React Portal[리액트 포털/리액트 포탈]과 이벤트 버블링 리액트 포털에는 재미있는 점이 몇 개 있습니다. 1. 컴포넌트 렌더링 위치와 돔 삽입 위치를 분리할 수 있습니다 리액트 트리 컴포넌트를 렌더링 위치와 실제 돔에 삽입되는 위치를 분리할 수 있습니다. 언뜻 보면 안티패턴 같아 보이지만, 데이터 관심사 중심으로 컴포넌트의 코로케이션(같이두기)가 가능해집니다. 데이터 중심 프로그래밍 관점에선 베리 굿입니다. 2. 렌더링 순서대로 컴포넌트가 자식으로 추가됩니다. 즉 portalNode의 1레벨 children으로 순서대로 추가됩니다. 주 : 개발환경에선 key를 지정해주지 않으면 자주 섞이는 것을 볼 수 있습니다 3. 컴포넌트 트리, 돔 트리 둘 중 한곳이 부모자식 관계면 이벤트 버블링을 이용할 수 있습니다. 아래와 같은 코드를 생각해 볼 수 있습니다. 포털 아.. 이전 1 다음