3주차..

1) 컴포넌트(Component) : 정해진 엘리먼트들(요소)을 사용하여 만든 화면의 일부분

2) 상태(State) : 컴포넌트에서 데이터를 유지하고 관리하기 위한 유일한 방법 == 그냥 사용할 데이터!

3) 속성(Props) : 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 방식 == 그냥 데이터 전달!

4) useEffect : 화면에 컴포넌트가 그려지면 처음 실행해야 하는 함수들을 모아두는 곳

 

속성은 쉽게 생각해서 컴포넌트에 데이터를 전달한다는 것이다. 그 전달 모습은 키와 벨류의 형태입니다. <Text> 태그엔 numberOfLines이란 속성이 있었습니다. 말줌임표 효과를 주었죠! <Image> 태그엔 resizeMode란 속성이 있었습니다. 이미지가 영역을 차지하는 방식을 나타냈죠. 이 모든 속성들은 공식 문서에 나와 있고, 해당 엘리먼트들이 태어날 때부터 가지고 있는 속성이였습니다.

 

컴포넌트마다 데이터를 보유하고 관리 할 수 있습니다. 데이터라고 불러도 되지만, 리액트에서는 컴포넌트에서 보유/관리 되는 데이터를 **상태**라 부릅니다.

리액트에서 상태(state)는 리액트 라이브러리에서 제공해주는 useState로 생성하고 setState 함수로 정/변경 할 수 있습니다.

 

UI = component(state)

당시 개발자들끼리 이 상태와 컴포넌트의 관계를 공식으로 표현한 글을 보고 대단하다!! 했던 기억이 있는데, 여러분들은 어떻게 느끼실지 궁금하네요 ㅎㅎ 저 공식은 즉, 사용자 화면(UI)는 컴포넌트(component)에 어떤 데이터(state)가 주입되고 변경되냐에 따라 변화된다를 뜻합니다 무슨말인지 아직 잘 와닿지 않으시죠? 다른건 잘 와닿지 않아도 state는 컴포넌트에서 관리되는 상태만 기억하시면 충분합니다 이 개념은 이번 강의에서 개념을 다 배운 뒤, 다음 6 강에서 실습 하며 직접 확인할 수 있습니다

 

• 화면이 그려진다음 가장 먼저 실행되는 함수, useEffect화면이 그려진 다음 가장 먼저 실행되는 함수로 사용방법이 간단합니다 형식만 알고 있으면 충분합니다

  **useEffect(()=>{**
  
  	...화면이 그려진 다음 가장 먼저 실행되야 할 코드 작성 공간
  
  **},[])**
  

  👉 useEffect(()=>{ },[])
•  
• 이 안에서, 화면이 그려진다음 실행시키고 싶은 함수를 작성한다면 가장먼저 실행이 됩니다. useEffect 또한 어떤 역할을 하는지만 알고! 바로 실습을 통해 확인해보도록 하겠습니다
• 👉 useEffect는 너무 간단하고 유용하게 쓰이는 리액트 기본 제공 함수입니다.