Section2 Unit6 [React] React State & Props

---

Section2 Unit6 [React] React State & Props

 

📌 Chapter1. React State & Props

• 리액트는 단방향 데이터 흐름(one-way data flow)을 가진다. 따라서 React에서 데이터를 다룰 때는 컴포넌트들 간의 상호 관계와 데이터의 역할, 데이터의 흐름을 고려하여야 한다.

• state와 props 모두 컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 가지고 있다.

 props는 함수의 매개변수처럼 컴포넌트에 전달되는 반면 state는 함수 내에 선언된 변수처럼 컴포넌트 안에서 관리된다.

 즉, props는 컴포넌트를 사용하는 외부자를 위한 데이터이고, state는 컴포넌트를 만드는 내부자를 위한 데이터이다. 

 

• 이번 챕터에서 React의 기본 개념인 state와 props를 학습했고, 이벤트 처리 방법과 controlled component가 무엇인지 학습했다.

리액트의 기본인 state와 props는 공식문서와 이전에 공부했었던 자료와 예제를 활용하고, 이번에 학습한 코드스테이츠의 자료를 참고하여 따로 정리해보았다.

 

React state와 간단하게 알아보는 useState

React 기본, props 사용하기

 특히 props는 계속 헷갈렸었는데, 정리하면서 다시 한 번 개념을 정리할 수 있어서 의미있는 시간이었다. 😊

 리액트에 대해 더 공부하고 나면 리액트의 데이터 흐름에 대한 정리도 다시 한 번 해보고 싶다는 생각이 들었다.

 

---

🌙  오늘의 회고

 주말이 지나서 그런지 피곤하고 집중력이 떨어지던 월요일이었다. 오늘 정규 수업 이후에 state와 props를 복습하는 시간을 가졌는데, props의 헷갈리던 부분들이 코드로 정리하다 보니 이해가 되었다. 리액트는 단방향 데이터 흐름을 가지고 있어 props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는게 다여서 생각해보면 정말 간단한건데, 왜 자꾸 전달받는 props가 헷갈렸는지 이해하려고 console.log를 정말 많이 찍어봤었다. 글로 보는 것보다 눈으로 직접 확인하니 명확하게 이해가 되어서 의미있던 시간이었다.

 리액트의 동작원리와 데이터 흐름에 대해서도 좀 더 찾아보고 싶었는데, 지금 찾아보는 자료들은 다 비슷한 이야기를 하는 것 같아서 조금 더 공부한 후에 다시 찾아보는 게 좋을 것 같다는 생각이 들었다.

 오늘 오후 라이브 세션에서 코드스테이츠 수료생이었던 현 코드스테이츠 개발자 분의 이야기를 들었는데, 인상깊었던 부분이 있었다. 나를 스토리텔링 할 수 있는 ‘무언가’를 하나는 가지고 있는 게 많은 도움이 된다는 이야기였다. 그게 블로그가 아니더라도 나를 기록할 수 있는, 표현할 수 있는 무언가를 가지고 있는게 중요하다는 것이었다. 내가 공부한 내용이 지금 당장은 어딘가에 기록해둘 만큼 가치가 있다고 생각되지 않을지도 모르겠지만, 그 기록과 고민한 흔적이 중요하다는 뜻 같았다. 그리고 그 말에 공감이 되었다.

 오늘 약간 피곤하고 무기력해서 상태가 별로라 수업 들을 때는 아, 그렇구나 하고 넘겼는데 지금 생각해보니 이런 세션이 나름 동기부여도 되는 것 같고, 소속감도 느끼게 해주는 것 같다.