useRef
useRef는 특정한 DOM을 선택하고 싶을 때 사용한다.
이게 무슨 말인지 설명하자면, 우선 아래의 코드를 추가하고 파일 삽입 기능을 추가하고 싶다고 했을 때를 예로 들어보자.
<input type="file" />
이와 같은 디자인의 파일 삽입 기능이 추가되게 된다.
하지만 나는 여기서 dropdown 메뉴를 통해서 파일 삽입 기능을 넣고 싶다고 했을 때, 디자인만 변경하고 기능은 그대로 가져가는 방식을 택하고 싶다.
<input style={{ display: "none"}} type="file" />그렇게 하고 싶을 때는 style을 추가해서 display: "none"을 해줘서 안보이도록 만들어주고 useRef를 이용해서 기능만 가져오는 것이다.
useRef를 이용해서 아래와 같은 함수를 만들어 주고
const inputOpenImageRef = useRef();
const handleOpenImageRef = () => {
inputOpenImageRef.current.click()
}useRef를 불러오고 이름을 정한 뒤에 useRef()를 지정해준다.
<input
type="file"
accept="image/jpeg, image/png"
ref={inputOpenImageRef}
style{{ display: "none" }}
onChange={handleUploadImage}
/>이런식으로 ref에 useRef를 이용해서 만든 함수를 연결해주면 된다.
이제 dropdown에서 클릭이 발생했을 때 onClick 이벤트가 발생했을 때 handleOpenImageRef를 호출하도록 하면 된다.
<Dropdown.Menu>
<Dropdown.Item onClick={handleOpenImageRef}>
프로필 사진 변경
</Dropdown.Item>
<Dropdown.Item onClick={handleLogout}>로그아웃</Dropdown.Item>
</Dropdown.Menu>이제 dropdown의 프로필 사진 변경이라는 항목을 누르면 파일 탐색기가 뜨면서 사진을 업로들 할 수 있게 된다.
Firebase
Storage 시작하기
firebase storage를 사용하기 위해서 프로젝트 안으로 들어오고 빌드 항목의 Storage를 클릭하고 시작하기를 누른다.
시작하기를 누르면 팝업창이 뜨는데 Secure rules for Cloud Storage 항목은 다음을 눌러서 패스하고, Set Cloud Storage location 항목으로 이동해서 한국에서 하고 있다면 한국에서 가장 가까운 곳을 선택해주면 된다.
여기서는 적당히 northeast를 선택하도록 하겠다.
(가까울 수록 빠른 서비스를 제공받을 수 있다.)
