ㄴ(속성(props)이 data를 전달하면 상태(state)가 관리를 함.)
React nactive는 React.js 라이브러리 기반으로 만들어진 프레임워크이며, 기본적인 구조는 리액트를 닮았다.
대표적으로
1) 컴포넌트(Component) : 정해진 엘리먼트들(요소)을 사용하여 만든 화면의 일부분
2) 상태(State) : 컴포넌트에서 데이터를 유지하고 관리하기 위한 유일한 방법(그냥 사용할 데이터)
3) 속성(Props) : 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 방식(그냥 데이터 전달)(키와 벨류의 형태로 전달함)
4) useEffect : 화면에 컴포넌트가 그려지면 처음 실행해야 하는 함수들을 모아두는 곳
이다.
Component
컴포넌트는 UI의 요소, 요소를 재사용 가능한 부분으로 조각내서 운영하는 기법 즉, 모든 화면의 부분이라고 할 수 있다.
Props
속성은 컴포넌트에 데이터를 전달하는 것이다.(키와 벨류의 형태로 전달함)
1.컴포넌트에 속성을 부여해줘서 전달할땐, 키와 벨류(content={content}) 형태로 전달해줘야 한다.
2. 컴포넌트를 반복문 돌릴땐, 컴포넌트마다 고유하다는 것을 표현하기 위해, map에서 나오는 인덱스(i)를 key = {i} 속성 전달 형태로 꼭 넣는다.
useState & useEffect
상태(State,useState)
컴포넌트마다 데이터를 보유하고 관리 할 수 있다. 리액트에서는 컴포넌트에서 보유/관리 되는 데이터를 상태(state)라 부른다.
리액트에서 상태는 이랙트 라이브러리에서 제공해주는 useState로 생성하고 setState 함수로 정하거나 변경 할 수 있다.
리액트는 사용자 화면(UI)가 상태(state)로 관리되는 데이터가 변경되면 따라 변경된다.
상태와 컴포넌트의 관계
UI = component(state)
이 공식은 사용자 화면(UI)는 컴포넌트(component)에 어떤 데이터(state)가 주입되고 변경되냐에 따라 변화된다를 뜻한다.
useEffect
useEffect는 화면이 그려진 다음 가장 먼저 실행되는 함수이며 사용방법은 다음과 같다.
useEffect(()=>{
...화면이 그려진 다음 가장 먼저 실행되야 할 코드 작성 공간
},[])
useEffect(()=>{
},[])
이 안에서, 화면이 그려진다음 실행시키고 싶은 함수를 작성한다면 가장먼저 실행이 된다.
보통 useEffect는 데이터를 준비할 때 사용한다. 데이터를 준비한다는 것은, 데이터를 어딘선가로부터 받은 후 상태(state)에 반영하는 것이다.
화면이 그려짐 -> useEffect가 데이터를 준비 -> 상태 데이터가 업데이트되고 화면이 다시그려짐
즉, 화면이 그려진 다음, 서버에게 필요한 데이터를 요청하여 받은 후, 화면을 다시 그릴 때 주로 사용된다.
