TIL: 2022-10-12

⚙️ 오늘 배운 주제

useEffect 실습, loading 화면 구현하기

 

🐹 오늘의 기분

어제 useEffect를 완전히 이해하지 못한 채로 학습을 마무리해서 아침부터 바로 있는 실습이 약간 걱정됐었다. 페어분과 상의해서 오전은 공부하기로 하고 실습은 오후부터 진행했다. 스스로 해보긴 했었는데 마지막에 rest api 불러오는 것에서 파라미터를 어떻게 넣어야 할지 감이 안 왔었다. 페어분께서 설명해주셨는데 문자열 변수를 하나 만들어서 템플릿 리터럴로 url 뒤에 넣어주는 방법이 있었다! 역시 혼자 하는 것보다 같이 하는 것이 훨씬 낫다... 혼자였다면 엄청 헤맸을 것임.. 

 

🗝 키워드

useEffect, 종속성 배열, Ajax 요청

 

🗣 스스로에게 설명

useEffect

두 번째 인자 종속성 배열에 값을 전달하면 그 값이 변화할 때마다(=Side Effect가 발생할 때마다) 첫 번째 인자로 전달한 함수를 실행한다.

 

삼항연산자로 로딩 컴포넌트 불러오기 

유튜브 로딩 화면

loading indicator: 로딩되는 동안 사용자에게 보여지는 이미지 

프로그램의 유저는 아주 다양한 환경에 놓여있음.

인터넷 환경이 좋을 수도 있고 안 좋을 수도 있다.

내 컴퓨터에서 로딩이 거의 없을 정도로 빠르게 작동한다고 해도, 더 나은 사용자 경험(UX)을 위해 로딩 컴포넌트를 구현하는 것이 좋다.

 

리액트로 구현하기

01. useState를 이용하여 로딩 상태를 저장할 변수와 상태 변경 함수를 지정한다.

const [isLoading, setIsLoading] = useState(true);

 

🙋‍♀️ 상태 변수 isLoading의 초기값은 꼭 true여야 하는가?

-> false로 해도 작동하긴 한다. 하지만 웬만하면 불리언 초기값은 true로 넣는 것이 좋다고 함. 

 

02. 삼항 연산자를 이용해 상태 변수의 참/거짓 여부에 따라 로딩 컴포넌트의 렌더링을 결정한다.

// LoadingIndicator 컴포넌트는 이미 구현되어 있다고 가정함.
{isLoading ? <LoadingIndicator /> : <div>로딩 완료 화면</div>}

 

03. useEffect 내에서 setIsLoading 함수로 isLoading의 상태를 변경한다.

useEffect에서 불러온 데이터가 렌더링되면 로딩 컴포넌트를 띄울 필요가 없어지므로 isLoading을 false로 바꿔주는 형식이다.

// filter가 바뀔 때마다 데이터를 새로 불러오는 코드
useEffect(() => {
  setIsLoading(true);
  // fetch로 데이터 불러오는 코드가 있다고 가정
  .then(() => {
  // 데이터 렌더링이 완료됐다고 가정
    setIsLoading(false);
  })
}, [filter]);

 

❓ 막히는 or 막혔던 부분

fetch에서 url에 parameter를 덧붙이는 방법

 

🔍 공부가 더 필요한 부분

여담이지만 유어클래스에 첨부된 공식 문서에서는 전부 Class 컴포넌트로 설명을 하고 있어서 코드를 읽어봐도 별 도움이 안 됐었는데 함수 컴포넌트로 작성된 공식 문서 사이트가 따로 있다는 것을 페어분 덕에 알게 되었다. 

전에 엔지니어님께서 라이브 세션 중에 언급을 하셨다는데 내 기억에서 싸악 사라짐.. 뭐지?

아무튼, 이제 리액트 공식 문서를 볼 일이 생기면 여기서 찾아봐야겠다. 

React Docs Beta