지난 강의에서 보았듯이
참조 기능은 굉장히 유용합니다
하지만 이제 이름을 설정할 때마다
이 입력을 지우고 싶다면 어떨까요?
이걸 초기화하려면 어떻게 할까요?
이론적으로는 handleClick에서
다시 playerName.current를
참조에 저장된 이 input 요소가
vaule=빈 문자열로 설정해줍니다
그러면 입력을 지워줄 것입니다
저장하고 나서 '이름 설정하기'를 클릭하면, 지워지는 게 보입니다
이제 이게 좋은 방식인지 아닌지에 대해 궁금해 하실 수 있습니다
왜냐하면 여러분이 잊지 말아야 할 것이
리액트는 선언적인 코드를 쓴다는 개념이기 때문입니다
이 DOM을 직접 조작하는 게 아니라는 것입니다
여러분 대신 그건 리액트가 하게 해야 합니다
이 9행을 보면
그 개념을 조금 벗어나고 있습니다
여기선 그냥 값을 읽어들이는 것 뿐입니다
DOM에서 아무것도 바꾸지 않습니다
하지만 이 10행에서는 확실히 명령적인 코드가 있습니다
더 이상 선언적 환경에 있지 않습니다
대신 우리는 지금 확실하게 브라우저에게
이 input의 값을 빈 문자열로 설정하라고 명령하고 있습니다
그러므로 우리는 규칙 또는 개념에 위반하는 것입니다
DOM 상호작용은 리액트가 해야 한다는
그 개념 말입니다
그럼에도 불구하고 이런 경우에
그저 input을 지우고 싶은 경우에
다른 상태 같은 것들과는
아무 연결이 되어 있지 않았으니
코드를 이런 식으로 작성해볼 수도 있습니다
왜냐하면 이건 최종적으로 많은 코드를 줄여주기 때문입니다
하지만 당연히 주의해야 할 부분은
참조를 사용하는 목적이
페이지의 모든 종류의 값들을 읽고 조정하기 위해서는 아니어야 합니다
왜냐하면 그건 리액트의 개념이 아니기 때문입니다
하지만 여기에 한 것처럼 참조를 사용하는 것으로
더 편리해질 수 있다면, 참조는 state(상태)와
전에 배운 다른 매커니즘들을 대체하는 좋은 방법입니다