Web Dev/ELICE

51 :: state, 링크, React 렌더링

HJPlumtree 2022. 1. 4. 18:07

엘리스 SW 엔지니어 트랙 51일차

새해 첫 실시간 강의날

 

 

State

useState는 굉장히 중요하다

상태 관리를 최근 여러번 들었는데

아마도 이것을 사용해서 상태 관리를 하나보다

 

그럼 state 사용법에 익숙해지면

상태 관리에도 도움이 되겠지?

 

리액트에서 바꿀 값은

state로 지정해주는 느낌이다.

 

리액트는 렌더링을 하며 그려주는 방식인데,

state를 변경하면 다시 렌더링되며

바뀐 state로 다시 그려준다

 

=> state만 조작하면 된다

 

보아하니 가장 상단 컴포넌트에서

state를 조작하고 만지네

 

 

상단만이 아니다

수정이 필요한 값이거나 props의 값을 바꾸고 싶으면

상단 컴포넌트건, 하단 컴포넌트건 state를 선언하고

사용해서 값을 바꾼다

 

 

링크

링크(a tag)는 서버에서 어떤 정보를 가져올 때 사용

delete 처럼 어떤 정보를 바꿀 때는 a tag 사용하면 절때 안된다

 

egoing님은 form과 input 사용

<form
  onSubmit={(evt) => {
    evt.preventDefault();
    props.onChangeMode("DELETE");
  }}
  >
  <input type="submit" value="delete" />
</form>

 

 

React way

보여주기 위해 state를 변경해서 렌더링을 다시 하고,

props를 몇 번에 걸쳐 이리로 보내고 받고 하는 React 방식이

아직 머리속에 잘 그려지지 않는다

 

이번주 state, props 잘 깨우쳐야겠다

이 둘이랑 친해지면 다음 고비까지 버티지 않을까 싶다

 

 

React by Lautaro Andreani #unsplash