오예예
110
2021-06-09 22:47:40
5
133

react 하위 컴포넌트에서 상위 컴포넌트를 재실행 시킬 수 있는 방법이 있을까요??


안녕하세요! 처음 설계를 잘못해서 고생하고 있는 개발자 지망생입니다! 다름이 아니라 제가 위치 api를 활용한 서비스를 만들고 있습니다. 컴포넌트 순서는 list -> show 로 이루어져 있습니다.

list.jsx 에서 위치를 허용시키고 데이터를 show.jsx로 넘기게 작업을 했는데 문제는 위치를 허용하지 않은 사람들에게 다시 위치 허용할 버튼을 만든 것이 문제가 되었습니다.. show.jsx에서 버튼을 클릭하면 list.jsx가 재실행하게 하고 싶은데 어떻게 접근하면 좋을까요..? 검색을 해도 잘 안나와서 이렇게 여쭤봅니다 ! (관련된 내용의 링크라도 달아주시면 감사합니다ㅜㅜ)


list.jsx 

const List = () => {
    const [weather,setWeather] = useState({});
    
    useEffect(() => {
    // 위치 허용
      navigator.geolocation.getCurrentPosition(handleGeo)
      function handleGeo(position){
          try{
          handleGeoSuccess(position)
          .then(res => res.json())
          .then(result => {
              setWeather(result);
          });
        } catch(error) {
            console.log(`location error:${error}`);
        }
      };
    },[])

    
    return (
        <>
        <div className={styles.info}>
        <Show weather = {weather} />
        </div>
   
       </>
    )

};

export default List;

 하위 컴포넌트인 show.jsx입니다


show.jsx 

const Show = (e) => {
    
    const reHandlePosition = () => {
        
    }

    return (
        <>
        <nav className={styles.locationBox}>
        {(e.weather.main !== undefined) ? (
            <div className={styles.location}>{e.weather.name}
            {Math.round(e.weather.main.temp)-273}°C
            {e.weather.weather[0].main}
            </div>
        ):
        (
            <div onClick={()=> {reHandlePosition()}} className={styles.not}> 날씨에 맞는 코디를 원한다면 클릭해 위치를 허용해주세요</div>
        )}
        </nav>
        </>
    )
};

export default Show;


0
  • 답변 5

  • 타트
    301
    2021-06-09 22:59:42 작성 2021-06-09 23:02:21 수정됨
    상위에서 유즈콜백 함수 만들어서 하위에 보내고 하위에서 버튼누르면 프롭스로 넘어온 함수 실행시키면 되지않나용?

    그럼 상위에서 만든 함수가 실행될테고 그 안에서 유즈스테이트를 쓰던지.. 해서 처리하면 될것 같아요
  • moonti
    3k
    2021-06-10 00:39:51

    상위의 상태를 변경하는 핸들러를 하위로 전달합니다

  • 오예예
    110
    2021-06-10 01:28:09

    두분 다 정말 감사합니다!ㅠㅠㅠㅠ  덕분에 유즈콜백에 대해 공부하면서 활용했습니다! 정말 죄송스럽지만 제 스스로 해결하려고 했는데 아직 막막한 부분이 있어서 더 여쭤봐도 될까요..?

    const List = () => {
    
    
        const [weather,setWeather] = useState({});
    
        const renderPosition = useCallback(()=> {
        
        },[]) 
    
        useEffect(() => {
          // 한번 더 재실행
          navigator.geolocation.getCurrentPosition(handleGeo)
          function handleGeo(position){
              try{
               handleGeoSuccess(position)
              .then(res => res.json())
              .then(async result => {
                await setWeather(result);
                       setTemp(result.main.temp);
              });
            } catch(error) {
                console.log(`location error:${error}`);
            }
          };
    
          
        },[])
    
        return (
            <>
            <Show weather = {weather} renderPosition={renderPosition} />
    
           </>
        )
    
    };
    
    export default List;

    힌트를 주신 덕분에 상위 컴포넌트에서 renderPosition 함수를 show.jsx에 넘겨서 클릭하면 반응하는 것까지 작업했습니다. 하지만 클릭을 통해 renderPosition 함수가 작동하면 useEffect가 한 번 더 재실행하게 하고 싶은데 어떻게 코드를 짜면 좋을까요..? 힌트만 주셔도 정말 감사하겠습니다 ㅠㅠㅠㅠ

  • 타트
    301
    2021-06-10 06:10:21
    유즈이펙트에서 실행하고 싶은 부분을 함수로 만들어서 유즈콜백에서도 실행시키던지.. 
    아니면 유즈스테이트를 만들어서 유즈이펙트의 두번째 인자로 주어서 유즈스테이트가 유즈콜백에서 변경되게 한다던지 하면 될것 같은데용? 스테이트 변경이 감지되면 유즈이펙트가 또 실행되니까요.
  • 오예예
    110
    2021-06-10 10:28:57
    오 그렇군요 !! 정말 감사합니다 !!
  • 로그인을 하시면 답변을 등록할 수 있습니다.