WIL 220723-220731

개편

부트캠프 일정에 맞추다보니 매주 목요일에 WIL를 작성했었는데 뭔가 한주를 마무리 하는 느낌이 도저히 안들어서 좀 개편이 필요함을 느낀다.

그냥 TIL 은 TIL 대로 작성하고 일요일에 WIL을 쓰는 방식으로 하기로 했다.

---

리액트를 처음으로 배우기 시작했다.
컴포넌트를 나누는 개념은 어렵지 않았지만 State 를 다루는 것과 그걸 Props 로 내려주는 방식이 조금 헷갈렸다.

Component 로 만들면 좋은것들은 무엇이 있을까?

1. 반복적인 HTML 코드
2. 자주 변경되는 것들
3. 전환되는 큰 페이지들 (예를 들면 모달창 같은)

props

부모 컴포넌트 -> 자식 컴포넌트으로 props를 내려주는 방식은 아래와 같다.

import React from "react";

// div안에서 { } 를 쓰고 props.motherName을 넣어보세요.
function Child(props) {
  return <div>{props.motherName}</div>;
}

function Mother() {
  const name = "김부인";
  return <Child motherName={name} />;
}

function GrandFather() {
  return <Mother />;
}

function App() {
  return <GrandFather />;
}

export default App;

---

state

state 는 변수와 다르다.
변수처럼 재할당을 통해 바꾸지 않는다.
useState() 를 사용한다.

import React from "react";

function App() {
  
  let title = [title, setTitle] = useState('자바스크립트를 배워봐요')
  
  return (
  	<div>
    	<h2>{title}</h2>
    	<button onClick={()=> setTitle('리액트를 배워봐요')}>바꾸기</button>
    </div>
    
  )
}

export default App;

버튼을 누르면 title state의 내용이 바뀌게 된다.
state 변경함수(여기서는 setTitle)는 기존 state 와 신규 state를 비교해서 같다면 변경하지 않고 그대로 두고 다르다면(변경 사항이 있다면) 변경하고 리랜더링한다.

리랜더링은 어떨때 일어날까?

1. state가 변경될 때
   • useState()의 state 변경함수를 사용해 값이 변경되면 리랜더링된다.

2. 새로운 props를 받았을 때
   • 전달 받은 props가 수정되었다면 리랜더링 된다.

3. 부모 컴포넌트가 리랜더링 될 때
   • state 나 props 값이 바뀌지 않았더라도 부모 컴포넌트가 리랜더링 되었다면 자식 또한 리랜더링 된다.

4. 강제 업데이트(forceUpdate())
   • props 나 state 가 아닌 다른 값이 변경되었을 때 리렌더링을 하고 싶다면 그때 사용할수 있는 메서드