[React] 함수컴포넌트 Hook을 이용한 Layout의 class명 변경

Movie.js에서 비동기 json loading이 완료되면 app.js의 특정 div의 class명을 바꿔주고싶었다.

 

1. app.js에서 movie.js에 함수 넘기기(props 이용)

app.js의 Movies layout

2. async json loading이 완료되면 app.js에 알리기

movie.js의 json read 완료 후 props의 함수 call

Movie.js에서 해당 함수가 불리면 위의 함수가 동작한다.

3. 특정 변수명을 useState를 이용해서 추가하기

app.js에서 useState import

app.js에서 isUsingGradAnim이라는 변수 추가

useState 사용법을 기록해보자면 아래와 같다.

const [<VAR_NAME>, <SETTER_NAME>] = useState(<INIT_VALUE>);

 

다시 위에서 한 번 봤던 app.js의 함수를 보자

useState로 setUsingGradAnim이라는 Setter함수를 선언했다. 그래서 movie.js로부터 loading complete 신호를 반았을 때 setUsingGradAnim(); 이라는 함수로 값의 변경이 가능한 것이다.

 

app.js에 위와같이 useEffect 추가

그리고 위와같이 useEffect의 두 번째 인자로 배열의 요소를 넣으면, 해당 요소가 변경될때만 hook이 발생하여 화살표함수가 동작한다.

 

 

이렇게 변수값을 hook을 이용해 변경하고나면, 특정 div의 class명이 isUsingGradAnim에 의해 동적으로 결정된다.

 

 

json 로딩중에는 gradient anim을, 후에는 고정배경을 설정

최종 결과물은 위의 gif와 같이 동작한다. json을 로딩중일때는 gradient animation이 수행되고, json loading이 완료되면 회색 배경으로 고정되게된다.

 

끝.