[항해99] WIL #3

WIL Part 1 - 내가 새롭게 알게된 핵심 부분

React - State

• 리액트 컴포넌트에서 다루는 데이터의 한 종류.
  • State:
    • 컴포넌트 내부에서 선언해서 내부에서 해당 state의 값을 조작하기 위한 목적으로 만든다.
• 리액트에서 사용하는 state는 동적인 데이터를 다루기 위해서 사용한다.
  • 예시:

function App(){
  const [value, setValue] = React.useState("Save Changes")
  const changeValue =() => setValue("Revert Changes")
  	return(
  		<div>
          <Btn 버튼프로퍼티={value} changeValue={changeValue} text={true}/> // props 사용법
          <Btn 버튼프로퍼티="Continue" text={false}/>
  		</div>
  )
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);  

• 버튼 클릭 시 < Btn > 태그에 있는 "버튼프로퍼티"라는 속성의 값을 변경하기 위해서 내부에 state를 만들었다.

• state를 만들기 위해선:

  1. 변경할 속성 값을 읽어올 값 자체를 지정하고,
  2. 그 값을 변경할 수 있는 함수를 넣기 위한 변수를 지정한다.
     • 보통 속성 값으로 지정한 이름에 "set + 값 이름" 형식으로 한다.
  3. 그리고 그 값을 변경 시킬 함수를 또 다른 변수에 집어넣어서 사용할 수 있다.

• 리액트에선 state의 값이 변경될 때 페이지가 리렌더링된다.

React - Props

• 리액트 컴포넌트에서 다루는 데이터의 한 종류.
  • Props:
    • 부모 컴포넌트가 자식 컴포넌트에게 보내는 값
• 리액트에서 자식 컴포넌트로 분리한 함수의 내용을 변경하기 위해 메인 함수에서 해당 컴포넌트에게 props를 통해 특정 속성을 부여한다.
• 속성이 부여되면 자식 컴포넌트가 리턴하는 함수 내용을 변경시킬 수 있다.

function Header(props) { 
  return (
    <header>
      <h1><a href="/">{props.title}</a></h1>
    </header>
  )
}

function App() {
  return (
    <div> 
      <Header title="React"></Header>
    </div>
  );
}

• 부모 컴포넌트인 App() 내부에서 리턴되는 < Header > 태그에 속성을 부여한다.
• 자식 컴포넌트인 Header() 에서 첫번째 매개변수로 props를 받고, 부모컴포넌트로 부터 받은 속성명을 props.title이라는 형태로 사용한다.

React - ReRendering

WIL Part 2 - 일주일을 끝내고 쓰는 일기.

이번 리액트 입문주차는 항해를 하면서 가장 힘들었던 기간이었다.

자바스크립트 공부를 열심히 했으니 리액트도 이해할 수 있을 거라고 생각했지만 ❌착각❌이었다. 자바스크립트 기반이라고 하더라도 리액트 자체 플로우와 체제가 너무 이해가 안 갔기 때문이다.

알고리즘 주차만 해도 어떻게든 방식을 생각해가고 코드를 짰으니 이번에도 짧고 간결한 코드는 아니더라도 할 수 있을거라고 생각했는데, 리액트의 흐름을 이해하지 못 하니 아무것도 할 수 없었다.

개인과제는 그냥 정말 강의에 나온 코드를 배끼는 수준으로만 진행했고, 입문주차 시험은 그렇게 만들어낸 과제를 따라쳐가면서 진행했다.

원래 지금은 이렇게 이해를 못 하는 구간이라고 매니저님들이 그랬지만, 나는 내 스스로 생각해서 코드를 짤 수 없고,,, props의 개념과 state의 개념, 컴포넌트를 나누는 기준, props로 전달해야하는게 뭔지 등등...

정말 리액트를 사용할 수 있다고 할 수 없었기 때문에 자괴감이 들었다.

다행히 생활코딩 강의를 통해서 개념과 플로우를 어느정도 익혔지만, 그때 느꼈던 막막한 감정은 정말...

그래도 이런 나를 위로해주는건, 많은 사람들이 나와 같은 감정을 느끼고 같은 상황에서 포기하지 않고 공부를 하는 모습을 보여줬기 때문이다.

이런게 바로 팀스터디의 장점일까 😭
아직 포기하지 않고 더 열심히 공부해야겠다는 생각이 들었다....

입문 주차에 자괴감을 너무 씨게 느껴서.. 정말 공부에 집중 안되는 주였지만,
어떻게든 힘내서 공부해야지..

하기 싫을 땐 잠시 일을 쉬고 오세요..
그러면 '아 그냥 아까 할걸...' 이라는 생각이 듭니다.....🫠