Props&State

컴포넌트를 만들기 위한 가장 중요한 요소 Props와 State

Props와 State를 설명하는데 위같은 그림이 적절한것 같다.

state는 일종의 컴포넌트가 가지고 있는 정보의 집합이다. props를 통해 하위 컴포넌트로 정보를 넘길 수 있다.
state는 모든 컴포넌트에 있는 것은 아니고 없는 컴포넌트도 있다.

역으로 생각하면 props는 state의 정보를 전달하는 역할이고!props의 특징은read only.즉, 상위의 컴포넌트에서 온 변화를 아래의 컴포넌트에서 바꿀 수 없다. 이것때문에 state와 props를 따로 저장하는일이 필요하다.

 

 

Props

props는 각 컴포넌트들간을 이동해 데이터를 전달하는 수단이다.read only라는 특징을 가지고 있다.

본격적으로 코드를 작성하며 알아보자.

함수형 컴포넌트 WorldClock과 export되는 App함수

왼쪽은 함수형으로 선언된 컴포넌트 WorldClock과 export되는 App함수이다. 

WorldClock함수는 props를 인자로 받는다. (참고로 return문 안에 보면 알 수 있듯이 모든 컴포넌트의 약속 하나의 <div>열고 닫음으로 이루어져 있다.)

즉,App()내에서 쓰일 때 city와 time에 속성같이 props값을 주어 이를 받아 WorldClock함수컴포넌트 내의 내용을 나타내게 된다. 그런데 App()내에 WorldClock컴포넌트가 너무 많으므로 컴포넌트를 묶는 역할을 하는 List와 Key에대해 알아보자.

 

 

 

 

 

<컴포너트 여럿을 묶기 List&Key> 

App내에 List형 변수 cityTimeData를 선언하고 값을 여럿 주어 묶어버렸다.

그리고 cityTimeData리스트에 대해 map을한 WorldClockList컴포넌트 묶음변수를 만들었다. 실제로 App에서 사용되는 것은 {WorldClockList} 변수.

컴포넌트 묶음 변수를 만드는 (list).map을 사용할 때 props에 전할 값들을 list에서 citytime으로 불러왔다.

만드는 방법은 (list)map.()에서 첫번째 인자로 callback함수를 주어 컴포넌트 하나씩 만들기! callback함수의 인자로 props가 될 값을 주었다.

=>하나의 데이터 타입으로 모은 후 각각의 맵을 통해서 자동생성 코드를 만들고 하나의 컴포넌트로 넣으면 끝!

(그런데 이렇게 끝나면 warning이 난다. index.js:1 Warning: Each child in a list should have a unique "key" prop.)

citytime이 prop같은 역할인데 keyprop이 없는것!
따라서 아래와 같이 map에서 콜백함수의 첫번째 인자 citytime와 같이 두번째 인자가 있으면 index값을 같이 넘겨주자.

key의 사용 1:key에 직접 값 주기

key의 사용2:map 두번째 인자로 index주기 

map에서 콜백함수의 인자 하나로 citytime만 넘겨주면 값들만 넘겨주고 key를 직접 쓸수도 있지만 두번째 인자로 index값을 같이 넘겨주는게 좋다. key는 리액트가 어떤 아이템이 생기고 없어지는지 확인하는데 도움이 된다. 변화에 민감한 React가 알아차리는데 필요하다.

 

 

State

state는 앞서 말했듯이 일종의 컴포넌트가 가지고 있는 정보의 집합이다.

모든 컴포넌트가 state를 가질 필요는 없고 state 비용이 많이 들어서 필요한곳에만 둔다. 
state두는 기준
1.props만으로 표현할 수 없다.
2.Render로 표시 되지 않는 값이다.(계산이나 다른 값이 필요하다든지)
->이 두가지가 해당되면 컴포넌트는 state를 둔다.

 

먼저 컴포넌트에는 두 가지 종류가 있다. 위에서 한 것처럼 함수형 컴포넌트와 클래스형 컴포넌트.

과거 함수형 컴포넌트는 state를 가질 수 없었고 클래스형 컴포넌트만이  state를 가질 수 있었다.

그러나 Hook의 등장으로 함수형 컴포넌트도 최근에 state를 가질 수 있게 되었다. 그럼에도 많은 class형 컴포넌트가 더욱 state를 아직 갖고 있으므로 class형으로 알아보자(class형이 무겁긴하다)

 

class형 컴포넌트로 WorldClock을 바꿔본것이다. React.Component를 상속하고 생성자(constructor)내에서 state가 될 것들을 선언한다. return은 render함수 내에서 이루어진다. 

render함수는 미리 약속된 이루어져 있는 것이다. 

 

 

 

 

 

 

 

 

 

 export되는 App()은 변화가 없다. props를 주는 것도 똑같다. 이를 받는 컴포넌트가 class형으로 바뀐것뿐!

그런데 WorldClock은 시계니깐 시와 분 값이 변해야하잖아!그래!state를 바꾸는 거야!

=>this.setState()로!

(this.state.minute+=1;<-이런방식으론 state를 바꿀 수 없다. React는 state변화하면 바로 다시 렌더링해야하는데 state변화감지 힘들어 this.setState()만 허용한다.)

 

아래는 컴포넌트 내에서 state를 바꾸도록 로직을 추가로 작성한 것이다.