👨‍💻 사건

• 팀프로젝트 중 팀원분께서 분명 통신을 되는데, 다음 컴포넌트로 통신하여 받은 props 를 넘길때 될때가 있고, 안될때가 있다고 하셔서 함께 고민해 보았다.

✅ 해결

useState를 통하여, 렌더링 될때와 안될때를 관리해주는 것을 만든다. 그후, 렌더링이 된다면 페이지를 렌더할수있도록 만들어준다.

또한 렌더링 이슈를 생성하지 않기위해, && 연산자와 삼항연산자를 적극 사용한다. ( 렌더링 되었다면, ~~~을 실행 )

const [isRendered,setIsRendered] = useState(false);
const [searchData, setSearchData] = useState([]);
const [keywordData, setKeywordData] = useState('');

useEffect(()=>{
	const getSearchData = async (searchKeyword) => {
    await axios({
      method: 'get',
      url: `https://mandarin.api.weniv.co.kr/user/searchuser/?keyword=${searchKeyword}`,
      headers: {
        Authorization: `Bearer ${token}`,
        'Content-type': 'application/json',
      },
    }).then((response) => {
      setSearchData(response.data);
			setIsRendered(true);
    });
  };
	getSearchData();
},[])
return (
	{ isRendered ? <div>{searchData}</div> : <span>로딩중</span> }
)