항해99 12기 - 4주차 WIL

이번주 주제: State, Props, 리렌더링 발생 조건

State

• State란 컴포넌트 내부에서 바뀔 수 있는 값이다.
• useState()를 사용해 state를 만든다.

const [ value, setValue ] = useState( 초기값 )

• 초기값을 변경하기 위해서는 setValue(바꾸고 싶은 값)를 사용한다.

불변성

• 불변성은 메모리에 있는 값을 변경할 수 없는 것을 말한다.
• 리액트에서는 state의 변화로 화면을 리렌더링할지 결정한다. state가 변하면 리렌더링 하고, 변하지않으면 리렌더링 하지않는다.
• state의 변화 전 메모리주소를 비교하는데, 만약 리액트에서 불변성을 지켜주지않고 직접수정을 가하면 값은 바뀌지만 메모리주소는 변함이 없게되어 리렌더링이 일어나지않는다.
• 그래서 직접 수정하지않고 기존의 값을 복사해 새로운 참조값을 만들어서 상태를 업데이트 해준다.

 const [dogs, setDogs] = useState(["말티즈"]);

  function onClickHandler() {
		// spread operator(전개 연산자)를 이용해서 dogs를 복사한다. 
	  // 그리고 나서 항목을 추가한다.
    setDogs([...dogs, "시고르자브르종"]);
  }

Props

• props는 properties의 줄임말이다. 어떠한 값을 컴포넌트에게 전달해줘야 할 때 props를 사용한다.
• 컴포넌트끼리의 정보교환 방식이라고 보면 된다.

  1. props는 반드시 위에서 아래 방향으로 흐른다.
     즉, [부모] -> [자식] 방향으로만 흐른다.(단방향)
  2. props는 반드시 읽기 전용으로 취급하며, 변경하지 않는다.

props 사용하기

import React from "react";

// div안에서 { } 를 쓰고 props.baboya를 넣어보자.
function Me(props) {
  return <div>{props.baboya}</div>;
}

function App() {
  const baboya = "baboya";
  return <Me baboya={baboya}/>;
}

export default App;

• props는 object literal 형태이기 때문에 {props.baboya} 로 꺼내서 사용할 수 있다.
• object literal 란 {key: “value”} 데이터 형태를 의미한다.

props drilling

• [부모] → [자식] → [그 자식] → [그 자식의 자식] 이 데이터를 받기 위해선 무려 3번이나 데이터를 내려줘야 한다. 이걸 바로 prop drilling, props가 아래로 뚫고 내려간다라고 한다.

리렌더링 발생 조건

• 랜더링이 발생하는 경우는 다음과 같다.
  1. 첫 리액트 앱을 실행했을 때
  2. 현재 리액트 내부에 어떤 상태(state)에 변경이 발생했을 때.
     • 컴포넌트 내부 state가 변경되었을 때
     • 컴포넌트에 새로운 props가 들어올 때,
     • 상위 부모 컴포넌트에서 위에 두 이유로 렌더링이 발생했을 때
• 첫 렌더링은 자동으로 일어난다. 리액트 앱이 실행되면 리액트는 전체 컴포넌트를 렌더링 하고 결과물을 DOM에 반영해 브라우저상에 보여준다. 첫 렌더링을 끝난 이후에 추가로 렌더링을 트리거 하려면 상태를 변경해주면 된다.
• 컴포넌트 상태에 변화가 생기면 리렌더링이 발생한다. 이때 여러 상태가 변경됐다면 리액트는 이를 큐 자료구조에 넣어 순서를 관리한다.

이번 주에 배운점 & 느낀점

국비시작했을때부터 파이썬만큼이나 배우고싶었던 리액트! 드디어 해봤다. 일단 이제까지 써왔던 코드형식이랑 너무 달라서 놀랐다. 그래도 자바 파이널 프로젝트때 열심히 했던 덕분인지.. 금방 익숙해져서 재미있었다. 그때 정말 둘이서 힘들었는데..ㅠ 그래도 다 내 실력이되어있었네 ㅠㅠ.. 역시 힘들다고 포기하지 말고 끝까지 해야한다. 지금은 아리까리하고 잘 모르겠지만 언젠간 다 이해하는 날이 오겠지..! 과제를 생각보다 빨리 끝내서 미리 숙련주차 강의를 받았는데.. 기초강의보다 더 지옥이었다.. 강의가 너무 많아..^^.. 그리고 강사쌤 목소리가 너무 좋으셔서 들으면서 졸았다. 그래도 캠켜놓고 공부하니까 대놓고 잠에 들지는 못하고, 깨려고 노력은 했다. 들어보면 정말 좋은 강의인데, 집중하기가 너무 힘들었다. 특히 점심먹고 나서 듣는 강의는 진짜..ㅋㅋㅋㅋ 아무튼 이번주는 팀원들이 많이 도와주셔서 정말 많이 배울수 있는 주였다.

리액트 기초

완성도 ⭐️⭐️⭐️⭐️ TodoList는 완성했지만, css를 그대로 가져다 썼고! 처음 HTML과제는 완성만 하면 되겠지 하고, css에 전혀 신경쓰지않았다.
기여도 ⭐️⭐️⭐️ 사실 뭘 기여하는 과제가 아니라 평가할 수가 없지만, 팀노션에 기여한게 거의 없는 것 같아서..!
팀호흡 ⭐️⭐️⭐️⭐️ 사실 팀원들 덕분에 첫 리액트 주차를 잘 끝낼 수 있었다!! 다른 분들은 어떻게 생각하실지 모르지만 나는 정말 만족!
만족도 ⭐️⭐️⭐️⭐️⭐️ 리액트가 무엇인지에 대해 배울 수 있었던 주였다. 처음 하는 것 치곤 과제가 좀 어려웠던 것 같긴 하지만..ㅠ 그래도 이렇게 배우는거겠지!