23.03.16

학습내용

1. useEffect(hook, class 기반 라이프 사이클, 비동기)
2. 배운것 이용해서 React 로그인 구현)

useEffect

• React의 라이프 사이클에 따라 실행되는 function들이 존재한다. class기반 component에서는 이 function들을 쉽게 사용가능했지만 Arrow function으로 넘어오면서 해당 라이프 사이클 function들을 사용하는것이 힘들어졌다.
• 따라서 hook을 통해 라이프 사이클 function들을 사용 할 수 있다
• useEffect는 화면이 랜더링 되어 사용자에게 보여진 후 실행되는 function이다.

{/* 화면이 랜더링 된 후 axios를 통해 사용자를 가져 온 뒤 화면에 보여준다. */}
const User02 = () => {
  console.log("User02");

  const [user, setUser] = useState(null);

  {/* 화면이 랜더링 된 후 호출되는 userEffectFunction, axios를 통해 data를 가져오고 필드를 변경하면 React가 set function을 감지해 화면을 다시 랜더링 한다 그렇게되면 매번 useEffect가 실행되는데 []을 넣어주면 최초 랜더링 시에만 실행된다*/}
  useEffect(()=>{
    {/*[]을 넣어주어 최초 랜더링시에만 실행 할 수 있으며 밑의 조건문을 통해 조건을 충족 할 때만 set function을 호출 하여 무한 랜더링을 방지한다.*/}
    if(!user){
      axiosGet();
    }
  },[]) {/*[]를 넣어주면 최초 랜더링시에만 실행*/}

  {/* axios를 통해 data를 가져오고 화면을 변경한다 */}
  const axiosGet = async ()=>{
    try {
      axios.get("http://localhost:8080/Spring15/user/getUser?name=홍길동&age=11")
      .then((response)=>{
        console.log(response);
        console.log(response.data);
         setUser(response.data);
      })
    } catch (error) {
      console.log(error);
    }
  }

  if(!user) {
    return null;
  }

  const userView = <li>{user.userId}  {user.userName} {user.age}</li>;
  return (
    <div className="ViewGood">
      <h2>User02</h2>
      {userView}
    </div>
    
  );
};
export default User02;