TIL27 export, import, useState 값 props로 사용,변

우리가 보통 함수를 export 하고 import 해서 쓴다고 배우게 되는데 오늘은 이걸 이용하여 js 파일이 다르더래도, 기존값을 가져오거나 변경해도 js가 다른곳에서도 변경된게 적용되도록 해주기로 했다. 이걸 쓰는 이유는 해당 음원 볼륨을 조절하기위한 팝업에서 삭제를 눌르게 되면 음원은 멈추게 되고 음원 리스트에서도 클릭되었던것이 클릭되지않은것처럼 색을 변화 시켜주어야한다. 하지만 이때 음원리스트js와 음원볼륨조절js가 다르기때문에 이를 통제하기위해 선택한것이 1. 함수를 export로 넘겨주어 쓰는것 2. 해당 js 태그에 useState로 쓰고있는 state를 props로 넘겨줘서 쓰는 것 이였다. 

 

먼저 테스트겸 해당 팝업에서 delete를 눌르면 test라는 함수로 url를 보내서 해당 url 이름을 가진 태그 id를 찾아서 style.backgroundColor를 gray로 바꿔주기로 했다. 그래서 기존 Asmr 이라는 함수컴포넌트 최상단위에 export const test 라고 하여 함수를 export 해주었고

위와같이 import 하여 해당 위치경로에서 불러왔다.

그리고 나서 불러온 test함수를 delete를 눌를때 실행되는 deleteVolume에서 해당 url이 담긴 list를 넘겨주었다. 이렇게해서 실행된 화면은 아래와같이 진행된다.

 

 

모든 코드를 설명하기엔 글이 길어질거같아 줄이도록 하겠다. 다만 이렇게 export import를 하여 js파일이 달라도 넘겨주는 값을 받아 그 값을 기준으로 받은곳에서 활용해서 쓸수 있다는것과 useState를 사용하는 state값과 그것을 변경하는 setState 를 태그 props로 하나하나 넘겨주어 사용해도 js가 다르더래도 바로바로 접점이 생겨서 변경될때도 다른곳에서 변경되게 해주었다.