🤓 What I Learned Today

리렌더링? 기본적인 리액트의 리렌더링 개념은 React가 데이터의 변화에 따라서 화면을 다시 그리는 현상이다.

리액트로 화면구현을 하다보니 제멋대로 화면이 바뀌는 것을 볼 수 있었는데 이것을 리렌더링이라고 한다고 한다. 특히, 로그인이나 회원가입시 페이지가 새로고침이 안됐으면 했는데 어떻게 해야지?

그러면..언제 어떻게 리렌더링이 일어날까..?대표적으로 리렌더링 조건에는 4가지가 있는데..

1.Props 가 바뀌었을때…

Props 업데이트가 일어나면 리렌더링을 하며, Props가 변경되는 건 부모 컴포넌트의 State도 변경이 일어난다는 의미이다.
부모 컴포넌트의 State 변경이 발생하면 Props도 업데이트되고, 모든 하위 컴포넌트에 대해 리렌더링이 발생한다.

2.State 바뀌었을때

State 업데이트가 일어나면 리렌더링을 한다.리액트에서 State 값이 변경되면 관련 컴포넌트들을 전부 리렌더링 한다.

3.부모 컴포넌트 렌더링

부모 컴포넌트가 렌더링을 하면 그 자식 컴포넌트들은 모두 리렌더링 한다.(Props와 같은 원리)

4.강제 업데이트(forceUpdate)가 실행될 때

props 나 state 가 아닌 다른 값이 변경되었을 때 리렌더링을 하고 싶다면 그때 사용할수 있는 메서드 이다.

🚀 Code Snippets

💡 새로고침 시에도 리덕스 내의 데이터를 유지하려면 어떤 방법을 써야할까?

그러면 새로고침을 막고 싶으면 여러가지 방법이 있는데…

❗️ 일단 쉬운 방법은 e.preventDefault()로 기본 이벤트를 막을 수 있다.

<button name="hi" onClick={preventSubmit}>

function preventSubmit(e){
    e.preventDefault();
    console.log(e);
}

❗️react -router-dom 사용하기

link, navigate는 주소만 바꾸고 페이지를 새로고침 하지 않는다.

• 클릭을 이용해 이동할 때는 Link 컴포넌트 사용

 <Link to="/">Home으로 가기</Link>

//함수 기능 내에서 페이지를 이동할 때에는
    
    useNavigate, 
    
    navigate 사용import { useNavigate } from "react-router-dom";
    


function App() {
  let navigate = useNavigate();
  function handleClick() {
    navigate("/home");
  }
  return (
    <div>
      <button onClick={handleClick}>go home</button>
    </div>
  );
}

❗️ redux - persist 패키지 사용LocalStorage와 SessionStorage의 storage를 redux에서 사용하게 해주는 Redux-Persist 라이브러리를 사용하기

• localStorge: 새로고침을 해도 데이터가 초기화되지 않음
• SessionStroge: 새로고침 시 데이터 초기화

🤔 Challenges Experienced

자..이제 이 개념을 로그인페이지에 구현해봐야겠다..하나하나 배워가는 재미!