[TIL] 2023-0111 : useRef / 3주차 과제 진행 과정

🐈오늘 배운 것

✔️useRef는 언제 사용?

오늘의 면접 질문 : useRef가 필요한 상황을 예시를 들어 설명해 주세요.

 

현재 알고있는 내용

1. DOM 에 직접 접근하고자 할 때

2. 리렌더링이 되어도 값을 유지하고 싶지만, 해당 값에 따라 리렌더링이 될 필요는 없는 경우

 

DOM 에 직접 접근을 해야할 필요가 있을 때는, 컴포넌트 렌더링 되자마자 input 에 focus 를 주거나, input 값을 clear 할 때가 있을 것이다. input 이라는 요소에 직접적으로 접근을 해야되기 때문에 useRef 로 ref 객체를 선언해주고, 접근하고자 하는 컴포넌트의 ref 속성으로 ref 객체를 전달해준다. 아! 그리고 스크롤을 조작할 때도 ref를 사용해야한다. 지난 프로젝트에서 답변 작성 후 해당 게시물로 스크롤을 이동하기 위해서 useRef 를 사용했던 기억이 있다.

 

그리고 두 번째 경우는, 값을 기억해야 하는 어떤 작업이 처리되는 도중에 리렌더링이 발생하게 되면 일반적인 변수나 state의 경우 함수 컴포넌트의 리렌더링과 동시에 값이 초기화 되기 때문에 이전 값을 기억하지 못하는 문제가 발생할 수 있다.

 

예를 들면 dnd 기능을 개발한다고 하자. dragStart 이벤트 발생과 동시에 현재 index 값을 기억하고, 다음 drop 이벤트가 발생할때까지 그 index 값을 기억해야 하는데 중간에 리렌더링이 되어버리는 상황이 만약에라도 발생한다면 에러가 날 수 있다. 따라서 리렌더링과 관계 없이 값을 기억하는 ref 를 사용한다. 

 

근데 ref가 정확히 뭐임?

공식 문서에 따르면 Ref란 렌더 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공한다고 한다. 방금 알았는데, Ref 는 Refernece 를 의미하는 단어이다. 그러니까 말하자면 특정 DOM을 참조하는 것이라고 볼 수 있겠다.

 

리액트 이전에 JS 에서는 특정 dom 에 접근하기 위해 id 값을 사용했는데, 리액트에서는 id 사용을 권장하지 않는다. 왜 그럴까?? 이유는 id의 유니크 값이라는 특수성과 컴포넌트는 재사용을 고려해야 한다는 점이다. JSX 에서 id 를 사용할 경우 DOM 에 그대로 전달이 되는데, 그 컴포넌트를 여러번 재사용하면 같은 id 값이 중복해서 생기는 것이다. 이런 사용은 잘못된 사용이기 때문에 컴포넌트 내부에서만 작동하는 ref 를 사용하길 권장한다. 

 

답변 정리

리액트에서 DOM 에 직접 접근하고자 할 때와, 컴포넌트가 리렌더링 되어도 값이 변경되지 않아야 하는 상황에서 사용할 수 있습니다. 첫 번째 경우는 특정 컴포넌트의 렌더링과 동시에 input 컴포넌트에 focus 를 하거나, input의 값을 clear 하는 경우 그리고 스크롤을 조작할 때 사용 할 수 있고, 두 번째 경우는 다음 렌더링이 발생하기 전까지 특정 값을 기억해야 하는 상황에서 사용될 수 있습니다.

 

✔️ 프리온보딩 인턴쉽 3주차 과제 w. ts, eslint 삽질...

이번 주차의 과제는 검색창 + 검색어 추천 기능을 구현하는 것이다. 단 캐싱 라이브러리를 사용하지 않고 캐싱, 즉 한 번 검색했던 데이터에 대해서 API 요청을 다시 보내지 않도록 해야한다. 

 

일단 퍼블리싱부터 하자! 

 

1. 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.

Main 페이지를 만들고 div를 찍자마자 해당 에러가 발생. 이번에 ts 초기세팅을 처음 해봤는데 뭔가 jsx 컴파일 관련 설정이 더 필요한 듯 하다. 해당 에러는 최상단에 react를 import 해오지 않으면 발생한다. import를 하면 에러는 사라지긴 하지만 뭔가 찝찝... ts 안쓸땐 없어도 됐잖아욧?! 

 

- 구글링 결과 ts 버전 4.1 그리고 react, react-dom의 버전이 17 이상이면 tsConfig.json 의 컴파일 옵션에서 jsx 항목을 업그레이드 버전에서 제공하는 새로운 컴파일 옵션, react-jsx 혹은 react-jsxdev 라고 변경하면 해결된다고 한다. 

- 그런데도 똑같아서 뭐가 문제지 했는데, tsConfig include 옵션의 경로를 잘못 설정해주고 있었다. 

- src 디렉토리의 하위 디렉토리에도 현재 config 가 영향을 주도록 해줘야했음.. 바보다..

 

2. eslint parserOptions 에 tsConfig를 명시해주지 않으면 에러난다. parserOptions는 또 뭐하는애지... 

"parserOptions": {
    ...
    "project": ["./tsconfig.json"],
    ...
  },

 

3. tsConfig 에서 moduleResolution 옵션을 설정해주어야 모듈을 해석하여 사용할 수 있다. 

 

4. styled-components 에서 같은 자식 컴포넌트끼리 스타일 변경하기!

- 현재 하고 싶은 것 : input을 클릭하면 그 옆에 아이콘을 사라지게 하고싶다. 부모-자식이 아닌 형제 컴포넌트간에 영향을 주고 싶음.

:focus + ${PlaceholderIcon} {
  display: none;
}

- input 컴포넌트에 위와 같이 형제 선택자를 작성하고 영향을 줄 컴포넌트를 선택한다. 이 때 PlaceholderIcon 이 Input 컴포넌트보다 먼저 위치에 있으면 안됌..

🐈To Do

- 즐겁게 개발하기 눈누난나