인프런 커뮤니티 질문&답변

Jiwoo Jung님의 프로필 이미지

작성한 질문수

이미지 관리 풀스택(feat. Node.js, React, MongoDB, AWS)

Context API 활용해서 중앙 데이터 관리하기

ImageList 컴포넌트에서 업로드 한 사진을 리스트에서 바로 보기 위해 이 방법도 괜찮나요??

23.09.25 05:55 작성

·

273

0

ImageList 컴포넌트 안에 있는 useEffect 종속배열 안에 images를 넣게 되면 images가 변경될 때마다 get을 호출해서 사진을 불러오기 때문에 결과적으로 사진을 업로드하면 리스트에 바로 보여지긴 하는데 안 좋은 방법인가요?

선생님께서 ContextAPI를 사용해 관리하는 것과 제가 생각한 방법의 장단점이 궁금해요

 const [images, setImages] = useState([]);

  useEffect(() => {
    axios
      .get("/images")
      .then((res) => setImages(res.data))
      .catch((err) => console.log(err));
  }, [images]); // images 추가!

답변 1

0

김시훈님의 프로필 이미지
김시훈
지식공유자

2023. 09. 26. 15:43

흠 저렇게 하면 UploadForm 컴퍼넌트가 이미지 업러드 이후 setImages 호출을 못하지 않나요? context로 분리한 이유는 서로 다른 컴퍼넌트에서 접속할 수 있게 하기위해서입니다. 사실상 동일한 방법으로는 그냥 저 상태를 사용하는 모든 자식 컴퍼넌트들의 부모 컴퍼넌트에 const [images, setImages] = useState([]); 를 정의하시고 props로 내려주셔도 되고요.