CODE_PLAN

간단히 React.memo를 이용해서 컴포넌트를 메모리에 저장해두고 필요할 때 갖다 쓰게 됩니다.
이렇게 하면 부모 컴포넌트의 state의 변경으로 인해 props가 변경이 일어나지 않는 한
컴포넌트는 리렌더링 되지 않습니다. 이것을 컴포넌트 memoization 이라고 합니다.

따라서, 최초 렌더링 이외에는 App.jsx 컴포넌트의 state가 변경되더라도 자식 컴포넌트들은 렌더링이 되지 않습니다. App.jsx 컴포넌트만 렌더링이 됩니다.

리 렌더링의 발생 조건

1. 컴포넌트에서 state가 바뀌었을 때
2. 컴포넌트가 내려받은 props가 변경되었을 때
3. 부모 컴포넌트가 리-렌더링 된 경우 자식 컴포넌트는 모두

useContext()를 사용하면 

ex). GrandFather → Context(중앙 관리소) → Child 순서로 전달가능 

• context API 필수 개념
  • createContext : context 생성
  • Consumer : context 변화 감지
  • Provider : context 전달(to 하위 컴포넌트)
    
    

주의해야 할 사항

• 렌더링 문제이후에 배우게 될 메모이제이션이 중요
• useContext를 사용할 때, Provider에서 제공한 value가 달라진다면 useContext를 사용하고 있는 모든 컴포넌트가 리렌더링 됩니다. 따라서 value 부분을 항상 신경써줘야 합니다!

리액트에서도 DOM을 선택해야 할 상황이 생기기 마련입니다.
예를 들면, 화면이 렌더링 되자마자 특정 input 태그가 focusing이 돼야 하는 경우 등이요.
그럴 경우에 우리는 useRef hook을 사용합니다.

state와 비교해서 간단히 말하자면 

1. state는 리렌더링이 꼭 필요한 값을 다룰 때 쓰면 된다.
2. ref는 리렌더링을 발생시키지 않는 값을 저장할 때 사용한다.
   
   

로 정리할수 있을것 같습니다.

onchange에 적용했을시에는 

state의 배치업데이트로 하나씩 늦는다는것 

개념 알아두기! 

cf) useEffect안에 if문을 넣으면 하나씩 늦지않고 바로 반영됩니다.

불변성이란? 값은 변하지 않는것을 뜻합니다.

즉, 불변성이 없다는 값은 변한다 뜻 (State) 

객체와 배열 같은것은 원시 데이터가 아님으로 불변성이 없습니다.

따라서, 리액트에서 불변성을 지켜주기 위해서

{...obj} 와 같은 스프레드 문법이나 map, filter 같은것으로

불변성을 지켜줍니다~

사용하는 이유

큰 프로젝트는 컴포넌트가 1000개 이렇게 되는데 거기서 공통적으로 쓰이는것을 다 똑같이 적어서 쓰면 매우 비효율적이라서 공통적인것을 따로 빼서씀

//GlobalStyle.jsx
import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
  body {
    font-family: "Helvetica", "Arial", sans-serif;
    line-height: 1.5;
  }
`;

export default GlobalStyle;

위와 같이 파일을 만들어놓고 

App.js 에서는 글로벌 컴포넌트를 가져다 이렇게 쓴다

//App.js
import GlobalStyle from "./GlobalStyle";
import Test from "./Test";

function App() {
	const title = 'exam';
	const contents = 'exam2';
  return (
    <>
      <GlobalStyle />
      <Test title={title} contents={contents} />
    </>
  );
}

export default App;

우선 위의 기능을 사용하기 위해서 확장자에서 간단하게 es7를 검색해서

ES7 React/Redux/GraphQL/React-Native snippets

라는것을 설치해준다음 적용시켜주면 바로 컴포넌트들에 적용되어집니다. 

효과> 시간절약 ㅎㅎ