그럼 refs (참조)란 무엇이며
어떻게 참조를 사용해 컴포넌트를 간소화할 수 있을까요?
리액트의 참조는 값입니다
상태(state)가 결국엔 값인 것처럼 말입니다
그리고 변수가 값을 담고 있는 것처럼 말입니다
하지만 이것은 특별한 종류의 값입니다
정확하게는, 리액트가 특별한 방식으로 제어합니다
이제 리액트에서 참조 값을 생서할 수 있는데
리액트에서 useRef 훅을 import함으로 가능합니다
또 다른 내장 훅 함수이며
다른 훅 함수들과 마찬가지로
컴포넌트 함수나 커스텀 훅 내에서만
호출할 수 있습니다
이건 나중에 더 살펴보도록 하겠습니다
일단 이렇게 참조 값을 생성했으면
이제 그것을 상수나 변수 안에 저장할 수 있습니다
그리고 이름은 원하는 대로 지어주시면 됩니다
이제 여기에 저는 참조 값을 생성하고
끝에는 이 입력창에 입력된 값을
받아오는 것입니다
그러니까 이름은 input이나 playerName으로 하겠습니다
이름은 다시 말씀드리지만 여러분 자유입니다
그리고 이 참조 값을 사용해 더 많은 것을 할 수 있는데
이 섹션을 계속 진행하면서
더 많은 사용법을 보게 될 것입니다
참조로 할 수 있는 것 중 하나이자
아마도 참조로 가장 많이 사용하게 될 부분은
바로 참조로 JSX 요소들과
연결할 수 있다는 것입니다
그리고 그것은 특별한 속성으로 가능한데
모든 리액트 컴포넌트들에서 사용이
자동적으로 가능하며 이 ref 속성입니다
key 속성이 특별한 속성인 것과 마찬가지입니다
이제 리액트는 그 참조 값을 input으로 사용하고
지금 같은 경우는 이 playerName입니다
그걸로 이 input 컴포넌트는 결국
이 참고와 연결된 것입니다
그럼 이 연결이 어떻게 우리를 도와주는 것일까요?
그건, 이제 이 참조 값을
예를 들어 handleClick 안에서 사용해서
이 버튼이 클릭되었을 때
그것과 연결된 요소에 접근합니다
그러니까, playerName을 통해 이 input 요소에 접근할 수 있는 것입니다
왜냐하면 이 playerName은 참조 속성을 통해
연결되어 있기 때문입니다
그래서 이 handleClick 내에서 input 요소에 대한
접근을 얻을 수 있고
주목할만한 것은 이 useRef를 통해
생성된 참조 값들을 위해 우선은
current 속성에 접근해야 합니다
그러니까 useRef로부터 받는 이 참조 값들은
항상 자바스크립트 객체이며
항상 current 속성을 가지고 있을 것입니다
물론 current 속성만 가지고 있을 것입니다
그러면 이 current 속성이
실제 참조 값을 갖고 있는 것이고
이 경우에는, 연결된 input이 저장됩니다
그래서 이제 current는
이 input 요소를 값으로 보관하고
여기 자동 추천에는 보이지 않지만
왜냐하면 IDE가 아직은
이 연결상황을 제대로 이해하지 못하기 때문입니다
아무튼 이제 노출된 모든 메소드들과
속성들에 접근할 수 있게 되었습니다
그 input HTML 요소를 통해서 말입니다
그리고 제가 말하는 건 내장된 input 요소를 말하는 것입니다
MDN을 보시면 노출된 메소드들과 속성에 대한
정보를 배울 수 있고
그 속성과 메소드들을
이 참조를 사용해 연결하면, 이 요소에 연결됩니다
그래서 여기서 이제
value 속성에 접근할 수 있습니다
이 value는 현재 입력된 값을 보관합니다
이제 그걸 사용해서
enteredName 상태를 업데이트해보겠습니다
그러면 handleClick에서 setEnteredPlayerName을 호출해서
그 상태를 업데이트하고
우리가 받는 이 값을 전달할 수 있습니다
이 입력 필드에서 바로 말입니다
그러니 이제 그 값을 매 자판 입력마다
로그로 출력할 필요가 없습니다
대신, handleChange 함수를 없애고
submitted 상태도 없애서
참조와 enteredPlayerName 상태만 유지합니다
그리고 이 밑에서 unchanged 속성도 없애줍니다
이 value 속성도 전부 필요 없습니다
참조 하나면 충분합니다
그리고 이 위에서는 이제
enteredPlayerName의 진실 여부를 확인하고 싶습니다
예를 들어 만약 빈 문자열이 아니라면
출력을 하고 싶습니다
그게 아닐 경우 (문자열이 빈 경우), '알 수 없는 사용자'를 출력하고 싶습니다
그리고 이런 반환문 같은 경우에
자바스크립트에 단축 방법이 있습니다
그냥 물음표 두 개를 써서
자바스크립트에게
이 값을 출력해야 한다고 알려줍니다
이 값이 true이든 false일 때 말입니다
예를 들어 enteredPlayerName이 빈 문자열이라면 말입니다
이제 그걸 가지고 상태(state)를
클릭에만 업데이트하고
값은 input 요소로부터 바로 참조를 통해 받습니다
이제 저장을 하고
돌아가서 재로딩해보면
Max를 입력해도, 매 자판 입력마다 아무 일도 일어나지 않습니다
하지만 '이름 설정하기'를 클릭하면, 여기 출력됩니다
그리고 제가 타이핑을 계속해도, 아무 일도 일어나지 않습니다
좋습니다
그리고 다시 '이름 설정하기'를 누르면 새로 업데이트됩니다
이게 참조 기능이 존재하는 이유입니다
이런 상황들에서 그저 값을 입력창에서
읽어들이고 싶을 때
코드를 많이 줄여줄 수 있고
더 간결한 컴포넌트들을 만들어 줍니다