24.07.19 day29 스터디 회고 2주차, props와 state의 차이

이번주 스터디는 오후 2시에 시작했는데, 여전히 만석님과 재희님밖에 없는 3인큐 스터디였다. 이번주는 메모리에 관한 키워드가 주제였다. 핀토스 때 가상메모리를 못 했었어서 개념에 대해 한 번 훑어보려 했던 차에 재희님이 야무진 내용을 들고왔었다. 이번엔 배울게 진짜 많았는데, malloc 구현할 때 공부했던 메모리 할당 기법에 대해 다시 복기하는 시간이 되었고, 페이지 크기에 대해 각 장단점을 학습하게 되어 단편화의 비교에 대해 잘 알게 되었다.

 

꼭 공부한 내용도 누군가한테 설명하려고 하면 어떻게 말이 잘 안나오게 되더라. 처음엔 학습이 부족해서 그런 줄 알았는데, 설명을 하려할 때에 머릿속에서 정리를 하고 말해야 하는데 정보들이 뒤죽박죽 되어있어 설명이 좀 모호한 것 같아 연습을 좀 더 해야겠다.

 

문제 풀이는 총 네 문제였는데 DP, 이분탐색, dfs, 다익스트라 문제로 이루어졌다.

이분탐색은 야무지게 풀었고 dfs는 코드의 기본 틀이 고정되어있어서 해당 방식으로 여러번 풀다 보면 이해가 될 수 있을 것 같다. 하지만 문제 자체를 이해하는데도 시간이 오래걸렸고 아직 문제 풀이와 더 친해져야 할 것 같더라.

DP와 다익스트라는 개념만 존재하지 아직도 코드 구현이 힘들어서 재희님의 설명으로 도움을 받았다.

보니까 재희님은 코드가 어떻게 구현되야하는지 직접 손으로 표를 그리면서 이해하려고 하더라. 그래서 본인의 코드에 대해 설명을 맛깔나게 잘해줘서 어렵긴한데 DP에 대해 어느정도 이해하게 되었다. 외쳐 갓재희

---

다음주 부터는 다시 vue.js로 포트폴리오 페이지를 다시 만들기 시작할 것 같다. 페이지를 어떻게 만들어야 할지 고민을 좀 했었는데 어느정도 구상이 끝나서 일단 이력서와 자소서로 구직을 진행하며 틈틈히 만들려고 한다. 재희님도 각자 본인 할 일들도 하면서 스터디를 진행하면 어떨까 싶냐며 분량을 좀 줄인다고 했으니 다른 작업들을 더 하면 될 것 같다.

그리고 vue도 하지만 기본적인 건 자바스크립트와 리액트를 자세히 파고 드는게 중요할 것 같다. 모든 라이브러리가 리액트에서 파생되어 생겼기 때문에 기초를 잘 다져야 새로운 기술을 배울 때 금방 적응하는 것 같다.

---

리액트에서 props와 state는 둘 다 컴포넌트에서 데이터를 관리하는데 사용되지만, 사용 방식과 목적이 다르다.

props

1. 전달되는 데이터
   • props는 부모 컴포넌트가 자식 컴포넌트에게 전달하는 데이터이며, 부모 컴포넌트에서 설정하고 자식 컴포넌트는 이를 읽기 전용으로 사용한다.
   • 코드 상 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달해야 하는 상황도 생기는데 이 때는 부모 컴포넌트에서 상수를 지정해줘서 상수 자체를 자식 컴포넌트로 내려보내는 방식이다. 이 때 자식 컴포넌트에서 상수에 값을 넣으면 부모 컴포넌트에 적용이 되는 것이다.
2. 불변성
   • 자식 컴포넌트는 props를 수정할 수 없다. 왜냐하면 컴포넌트 외부에서 전달된 값을 그대로 사용하기 때문에 변경이 불가능하다.
3. 용도
   • 컴포넌트 간 데이터 전달이며, 컴포넌트의 동작을 설정하기 위한 매개변수로 사용된다.

state

1. 내부 데이터
   • state는 컴포넌트 내에서 자체적으로 관리하는 데이터이며, 컴포넌트 자체의 상태를 나타낸다.
   • 컴포넌트 자체에서 움직이는 데이터이며 자식에서 부모로 데이터를 받아오기 위해 state를 사용할 순 있다.
2. 가변성:
   • 컴포넌트는 자신의 state를 변경할 수 있으며, 변경된 state는 리액트가 컴포넌트를 재렌더링하게 한다.
3. 용도:
   • 사용자 인터랙션에 따라 변하는 동적인 데이터 관리이며, 컴포넌트 내부에서 변화하는 값이나 상태를 관리하기 위해 사용된다.

요약

• props: 부모 컴포넌트로부터 전달받은 읽기 전용 데이터. 불변. 컴포넌트 간 데이터 전달에 사용
• state: 컴포넌트 내부에서 관리되는 데이터. 가변. 컴포넌트 내의 동적인 상태 관리에 사용