ReactJS_스터디 2일차 (23/02/07)

yhwa·2023년 2월 7일
0
post-thumbnail

📝 ReactJS로 영화 웹 서비스 만들기 : From #3.0 to #3.3

리액트의 state와 setState 에 대해 이해합니다.

🎯 데이터 갱신을 위한 컴포넌트의 리렌더링

- ReactJS는 같은 컴포넌트를 리렌더해도, 그 중에서 변화가 있는 부분만을 감지하여 해당 영역만 업데이트합니다.
- 이전과 차이가 있는 부분만, 컴포넌트 자체를 재생성합니다.

⛳️ state

- ReactJS는 state값에 변화가 일어나면, 자동으로 리렌더링이 트리거됩니다.   
- ReactJS에서 데이터를 관리하는 영역
- 업데이트될 데이터
- 데이터가 저장되는 곳 입니다.
- 바뀐 데이터만을 반영하기위해 UI를 변경된 부분만 다시 렌더링합니다.
- 데이터가 바뀔때마다 UI를 리렌더링합니다.

🫶 리액트JS는 이전에 렌더링된 컴포넌트가 무엇이었는지 확인하고있습니다.
다음 렌더링 될 컴포넌트는 어떤지 보고, 리액트JS는 다른 부분만 파악합니다.

👀 리렌더링(=refresh)을 발생키시는 방법
사용자에게 업데이트된 것을 보여주고싶으면, 새로운 정보를 가지고 컴포넌트를 리렌더해야합니다.

👉 React.useState()

- React.useState를 console.log로 찍어보면, 2개의 요소를 가진 배열이 1개 반환됩니다.
  2가지 요소가 JS에서 했던 1)변수를 생성하고 2)이벤트 함수생성 단계를 대체합니다.

1번째 요소 : undefined (state의 초기값)
2번째 요소 : function (=modifier, 초기값을 변경하는 function)

📌 useState의 2가지 요소 변수생성

- 2번째 요소인 modifier 함수의 변수 네이밍은 통상적으로 "set+데이터 초기값 변수명" 입니다.
- 두 가지 모두 어떤 네이밍을 하더라도 상관없습니다, 다만 통상적 네이밍이 존재합니다.
const [data, setData] = React.useState(); //초기값 : undefined
const [data, setData] = React.useState(""); //초기값 : 빈 string값
const [data, setData] = React.useState(0); //초기값 : 0

⛳️ setState (=modifier 함수)

- modifier 함수를 이용해 초기 state값을 업데이트합니다.
- 업데이트와 동시에 state값이 변경되며 해당 영역의 리렌더링이 일어납니다.
//html Root(실제 DOM 요소)
const root = document.getElementById("root");

//App
function App() {
  const [data, setData] = React.useState(0);

  const onClickPlus = () => {
    setData(data + 1);
  }

  const onClickMinus = () => {
    setData(data - 1);
  }

  return (
    <div>
    	<h3>Total clicks: {data}</h3>
		<button onClick={onClickPlus}>plus</button>
		<button onClick={onClickMinus}>plus</button>
	</div>
	);
}

//Render
ReactDOM.render(<App />, root);

👉 state가 변경되면 리렌더링이 일어납니다. > 끝

- ReactJS의 state, setState(modifier) 기능으로 vanillaJS의 긴 과정을 대체했습니다.
- JS에서 해야했던 것 ( HTML생성 > 찾기 > 이벤트리스너를 더하기 > UI업데이트 )

자바스크립트가 따로따로 진행해야 했던 모든 과정들 (요소생성, 이벤트리스너 추가, UI업데이트)을 리액트JS가 한번에 해결해주고 있습니다.

🙋‍♀️ 오늘의 생각

profile
📌 FE 공부 정리 공간입니다.

0개의 댓글