📌 [230327] React props state 2부

 * *  고민 미해결 글입니다.  * *

---

🍀 오늘의 날짜 : 23년 03월 27일 
🍀 오늘의 주제 : 사랑해요 Chat GPT

---

아직 React에 대해 모르는 것이 너무 많은 저는 Chat GPT의 도움을 받았습니다. 무언가를 구현해줘 보다는 이러한 기능은 무엇인지 묻는 질문이나, 사용 방법 등을 묻는 위주로 사용해보았습니다. 사용해보니 확실히 공부할 때 뿐만이 아니라 나중에 실무에서도 막히는 부분에 있어서 도움을 받을 수 있다는 생각이 들었습니다. 좋은 기술의 발전이네요!

 

 

 

 

🔖 useState 에서 const를 사용하는 이유 

 = 직접적인 수정을 막기 위해서. 

 

# useState 구조에서 state 갱신 함수는 state 저장 변수를 ' 변경 ' 이 아닌, ' 갱신 ' 하는 방식으로 작동합니다. 

여기서 ' 갱신 ' 이란 페이지 리렌더링이 발생하고 이에 따라 state 저장 변수가 재설정되는데 리렌더링이 발생과 동시에 변경(갱신) 이 되니까 const 사용이 가능한 것 입니다. 

useState 로 선언된 상태 변수의 값을 직접 수정하게 되면 react는 상태가 변경된지 모르기 때문에 리렌더링이 일어나지 않게 됩니다. 그래서 위와 같이 직접적으로 수정하는 것을 막기 위해 const를 사용합니다. 

멋지고 똑똑한 사람들... ㅠ

 

 

🔖 this.state 함수는 함수형 컴포넌트에서 사용하는 방식이고, 클래스형 컴포넌트에서는 this.state 대신 this.setState를 사용해야 한다.

**  둘 다 React 에서 상태를 관리하기 위한 중요한 요소이므로 정확한 이해가 필요합니다. 

 

# this.state

현재 컴포넌트의 상태를 나타내는 객체

this.state의 값은 직접적으로는 변경을 할 수 없으며, this.setState( ) 메서드를 사용해야 합니다. 

 

# this.setState

새로운 상태를 전달하면서 컴포넌트를 리렌더링합니다. React는 this.setState( ) 메서드를 호출해서 상태가 변경 되었음을 감지하고, 변경된 내용을 View에 반영합니다. 

** 비동기적으로 동작하기에 즉시 변경 사항이 반영되지 않을 수 있습니다. 이를 해결하기 위해서 callback 함수를 전달하여 변경 사항이 적용 된 후에 추가 작업을 수행할 수 있습니다. 

 

 

 

💡 input 을 값을 입력했을 때, myPage에서도 뜨게 하고 싶은데 실패했습니다. 

💡추가적으로 각 트윗들을 삭제하거나 수정하는 기능도 구현해보고 싶습니다. 언젠가는....

 

추가 필요 공부 내역 
# React에서 입력 값들을 저장 및 다른 컴포넌트에서도 출력할 수 있는 기법 공부