이번 섹션은
Refs(참조)와 Portals(포탈)에 관한 것입니다
아주 살짝 심화된 리액트 개념인데
물론 여러분이 앞으로 만들
모든 리액트 앱에서 필요한 것은 아닙니다
심지어는 지금까지 우리가 데모 앱을
만드는 동안에도 필요하지 않았습니다
그러나 이 두 기능은 특정한 것들을 더 간단하게 만들어주며
특정 문제들을 해결하는 데 도움을 줍니다
이 두 기능을 쓰지 않으면 절대 해결할 수 없는 그런 문제들 말입니다
그래서 이 섹션에서는
Refs(참조)가 무엇인지 배우고
이 참조 기능을 사용하여 더 간단하게
DOM 요소들에 접근하고 그 접근으로 할 수 있는 게 무엇인지 다룰 것입니다
이 참초 기능을 사용해서 어떻게
state(상태)가 아닌 값들을 제어하고
언제 그런 경우들이 생기는지 보게 될 것입니다
그리고 어떻게 API를 노출하는 컴포넌트들을
구축하는지 배울 것입니다
예를 들어 다른 컴포넌트들에 호출이 가능한 컴포넘트라는 건
참조 개념의 도움으로 가능합니다
그 다음에 이 섹션에서는 물론 Portals(포탈)에 대해서도 다룹니다
포탈이 무엇인지 배우고
이 포탈 기능을 사용해서 어떻게 분리를 하는지 배울 건데
실제 DOM에서 렌더링되는
요소의 위치를 JSX 코드에서 사용하는 위치와
분리시키는 것입니다
그리고 당연히 지금은
이것들이 추상적으로 들리고
아마 복잡하게 들리실 것입니다
하지만 그러니까 이제부터
새로운 데모 프로젝트를 사용해서
그 모든 기능들을 사용해 볼 것입니다
그리고 순차적인 과정으로
그것들의 사용법을 배울 것입니다
이제 이 섹션에서는 이 데모 프로젝트를 구축할 것인데
결국엔 웹사이트 방문자들이 할 수 있는 게임 같은 것입니다
각기 다른 시간 제한의 도전도 있고
지정된 시간이 다다를 때를 가늠하는 것인데
그 목표 시간이 지나기 전에 타이머를 멈춰야 합니다
이 게임을 참조와 포탈을 사용해 만들어 볼 것입니다
물론 컴포넌트와 상태
그리고 전에 배웠던 모든 것들도 활용할 것입니다
그리고 늘 그랬듯이 이 초기 프로젝트는 첨부되어 있습니다
물론 로컬 프로젝트와
CodeSandbox 프로젝트 링크가 둘 다 있습니다
그리고 그 초기 프로젝트 안에
꽤 기본적인 앱 컴포넌트와
커스텀 컴포넌트 하나와 player 컴포넌트가
보일 것입니다
만약 개발 서버를 로컬로 시작하면
그 전에 의존성들도 로컬로 설치하여야 합니다
늘 그랬던 것처럼 말입니다
물론 CodeSandbox에서는 그럴 필요 없다는 것도 아실 것입니다
그러고 나서 웹사이트를 방문하면
이런 게 보입니다
지금 아셔야 할 것은
이 입력창은 아직 작동하지 않습니다
'Set Name' (이름 설정하기)를 눌러도 아무 일이 생기지 않습니다
하지만 그것이 우리가 첫 번째로 작업할 부분입니다
그리고 참조를 사용하는 첫 번째 예시가 되겠습니다