참조 기능은 꽤 유용하다는 것을 확인했습니다
이제부터는 또 다른 적용 방법으로
참조 기능을 유용하게
HTML 요소와 연결하지 않고도 사용하는 법에 대해 다뤄보겠습니다
하지만 그 전에 중요한 것은
참조와 상태의 차이를 이해하는 것입니다
여기서 스스로에게 질문해봅시다
애초에 상태는 왜 사용하는 것일까요?
차라리 상태를 모두 없애고
상태 업데이트 함수 호출도 전부 없애고
대신에 그냥 바로
playerName.current.value를 밑에 쓰면
왜 안 되는 것일까요?
그에 대답은 그렇게는 작동을 안 한다는 것입니다
그런 식으로 시도하면 여기 보다시피
무언가 문제가 발생합니다
정확히는 여기 에러가 발생했습니다
정의되지 않은 속성 값을 읽는 데 실패했다는 내용입니다
여기서 문제는 제가 접근하려는 것이
이 value 속성인데
playerName.current 안에 저장되어 있고
그 playerName.current가 정의되지 않은 것으로 보입니다
그 이유는
player.Name.current에 저장된 값을
출력하고자 해서 그렇습니다
이 컴포넌트가 처음 렌더링될 때 말입니다
하지만 그러고 나면, 여기 이 연결
즉, 이 ref 속성을 통한 연결이 수립되지 않습니다
그래서 그 첫 컴포넌트 렌더링 사이클에서
그 컴포넌트 함수가 처음
실행될 때
playerName.current는 정의되지 않는 것입니다
그건 다음 렌더링 사이클에서만
이 필드와 연결이 끊기고
그제야 값에 접근을 할 수 있는 것입니다
하지만 당연히 그걸 해결하기 위해
playerName.current가 true인지 확인해볼 수 있습니다
그러니까 만약 undefined (정의되지 않음)일 경우 말입니다
만약 그럴 경우 playerName.current.value를 출력합니다
그래야 playerName.current가 설정되었고
이 연결이 수립되었다는 것을 알 수 있기 때문입니다
그리고 그게 아닐 경우, 이걸 출력합니다 (알 수 없는 사용자)
이 코드를 이런 식으로 바꾸고
저장하면 에러가 사라집니다
하지만 이제 여기에 무언가를 입력하고
'이름 설정하기'를 클릭하면 아무 일도 생기지 않습니다
지워지기는 합니다만 '알 수 없는 사용자'가 대체되지 않습니다
그게 바로 참조와 상태의 차이점입니다
단순히 이
연결이 처음에 없다는 것 뿐만이 아닙니다
더 중요한 것은 참조가 바뀔 때마다
컴포넌트 함수가 재실행되지 않는다는 것입니다
그리고 상태에 경우, 당연히 다릅니다
상태를 업데이트하면
예를 들어 상태 업데이트 함수를 통해 업데이트하면
컴포넌트 함수는 재실행됩니다
그리고 참조에 경우, 그렇지 않습니다
그러므로 상태와 참조 모두 중요한 개념들이며
리액트 세계에서 그들만의 목적이 따로 있습니다
상태 값들은 컴포넌트들의 재실행을 야기합니다
상태 업데이트 함수를 통해 변화가 이루어졌을 때 말입니다
그러므로 상태는
UI에 바로 반영되어야 하는
값들이 있을 때만 사용해야 합니다
한편, 상태를 사용하지 말아야 할 경우는
시스템 내부에 보이지 않는 쪽에서만 다루는 값들이나
UI에 직접적인 영향을 끼치지 않는 값들을 갖고 있을 경우입니다
그리고 그러한 예시들을
그 값들을 사용하여 추후 강의에서 배워볼 예정입니다
이제 한편으로, 참조는
컴포넌트들이 다시 실행되게 하지 않습니다
컴포넌트들은 단지
참조 값이 바뀌었다는 이유로 재실행되지 않습니다
하지만 refs를 사용할 수 있는 경우는, 전에 보여드린 것처럼
DOM 요소에 직접적인 접근이 필요할 때 입니다
그리고 또 다른 예시를 보여드릴 건데
이는 나중에 유용할 것입니다
하지만 지금 여러분은 여기서도 예시를 보고 있습니다
참조를 사용하여 현재 input 필드에 입력되는 값을
받아오고 있습니다
그러면 이제 이 상태를 도로 가져오겠습니다
왜냐하면, 배운 것처럼
이 상태는 UI를 업데이트하고
업데이트된 값을 웹사이트에 반영하는 데에 필요합니다
그걸로, 이제 그 상태로 돌려놨으니
원래대로 잘 작동해야 할 것이고
이제 참조에 대해 더 깊이 배워볼 수 있습니다