필자는 트위치 다중 시청페이지를 개발하는 도중, 디스코드의 방송화면을 클릭하면 클릭한 화면이 확대가 되고, 나머지는 작아지는 그런 기능을 개발하려고 했다.
각 스트리머의 user_id를 key로 잡고 선택한 방송을 확대하려고 했다. 
위의 UI같이 변경하려는 찰나.배열 아이템의 순서를 바꾸니 위치 이동이 일어난 컴포넌트의 Ifame들이 전부 다 다시 그려지는 것이다.
살짝 뇌를 빼고 코딩하고 있던 필자는
???: 어 이거 왜 랜더링되지..키 같은데..
라는 소리나 하고 있었다. React의 랜더링을 생각해보자.
랜더링이란 UI를 화면에 그리는 것. React에서는 가상돔의 현재와 이전을 비교하여 변경점이 있으면 다시 그리는 것이다. 이때 우리가 익히 알듯이 key가 같으면 변경되지 않은 상태로 인지하여 수정하지 않는다.
그래서 2번 화면을 확대하면 3,4번은 새로고침 되지않지만, 1,2번 화면은 다시 그려지기에 다시 로딩한다.
여기 까지만 생각하면 어,,그래..이게 맞지 하지만, 이미 순서가 바뀜으로 키가 변경된 것이고 react는 랜더링 할 수 밖에 없다.
자 그럼, 랜더링되는 걸 피해야 iframe이 새로고침 되지 않는다. 어떻게 해결해야 할까.
일단 확대된 레이아웃처럼 만드려면, 확대되는 방송화면이 첫 번쨰 아이템으로 와야한다. 이는 css로 해결 할 수 있었다.
방송화면은 flex아이템으로 order속성을 주면 그 순서를 바꿀 수 있다. 그렇다면, 배열을 수정하지 않고 선택된 방송 정보만 상태에 저장해서 조건문으로 class만 수정해주면 확대된 레이아웃처럼 변경 할 수 있는 것이다.
