React 기초 : Props (함수형 Component), State (클래스형 Component)

지난 시간에 함수형 Component를 공부하면서 속성인 Props 에 대해 알아봤습니다. Props는 기본적으로 이름이나 사진 또는 타이틀과 내용같이 고정되어진 데이터를 처리하는데 사용하고 있습니다. 이번에 같이 볼 State는 말그대로 상태를 나타내는 것으로 변경될 수 있는 데이터를 처리할 때 사용합니다. State가 변경되면 render(  ) 함수가 다시 실행된다는 이야기입니다.

 

그래서 State를 사용하게 된다면 클래스형 Component를 사용하게 된다는 점도 머리속에 저장하고 진행해 보는 걸로 하겠습니다. (참고로 Props는 함수형 Component입니다. )

 

무슨뜻인지는 Codepen을 통하여 예제를 보면서 이해를 하는 것으로 해 보겠습니다.

 

---

▒  Props 개념을 이용한 시간 나타내기

 

2번째 시간에 현재시각을 나타내는 React 프로그램을 다음과 같이 만들어 보았습니다. 

 

 

상기 내용은 JSX 문법의 구조를 이해하기 위하여 말씀 드린거고 같은 예를 Props속성을 이용한 함수로 바꿔 보도록 하겠습니다. 

 

 

▶ Props를 사용한 함수형 Component 사용

 

함수형 컴포넌트를 선언하는 순서는 function Component명(props)를 정의하고 return(  )값을 선언한 후 props와 연결된 객체를 불러와서 로컬타임함수를 적용시키는 개념입니다. (무슨말인지 감이 안잡히는게 당연합니다. ) 코딩으로 나타내면 다음과 같습니다. 

 

함수형 클래스 속성 사용

 

 

▶ Props에 객체 데이터 연결

 

props에 date객체를 연결한 속성이 되기 때문에 date 속성을 밑에 new Date(  )라는 함수를 정의하면 작동할 것으로 보입니다. 

 

 

 

---

 

 

▒ Class용 Component를 활용한 코딩 수정

 

 

▶ Class용 Component 선언

 

Class용 Component는 React.Component에서 상속을 받아 선언하며 바로 render(  )함수를 다음과 같이 정의합니다.

 

 

 

▶ 내장된 Class용 Component 활용

 

Class로 선언된 Component (여기서는 Time)는 Props가 내장이 되어 있습니다. 따라서 return(  )함수의 props명 앞에 이 props를 사용하겠다라는 의미로 this를 붙혀주면 다음과 같이 똑같이 작동됩니다. 

 

 

 

---

 

▒ State를 사용한 Class Component 구조

 

 

▶ 생성자와 초기화 

 

Class Component에는 props가 내장되어 있다고 언급 되었습니다. 따라서 State구조를 선언하기 위해서는 다음과 같이 props를 생성자를 통해 선언하고 초기화를 해줘야합니다. 

생성자는 constructor를 사용하고 초기화는 super를 사용합니다. 

 

 

 

▶ 변수를 가지고 있는 state 선언

 

서두에 변경될 수 있는 수(변수)를 사용할 때 state를 사용한다고 말씀 드렸습니다. 시간에 대한 부분은 시시각각 변하기 때문에 state를 이용하는게 맞습니다. 

 

초기화된 props에 state의 date를 정의하도록 하겠습니다. 

 

 

그다음 Class용 Component가 State에 의해 선언되었기 때문에 외부에 렌더링만 선언해 주면 기본구조는 끝이 납니다. 

 

 

상기와 같은 코딩순서가 state를 이용하는 방식입니다. 그런데 로딩된 브라우저를 보면 시각이 멈춰 있습니다. 즉 state에 date 객체를 한번만 선언이 되어있어서 그렇습니다. 

 

 

▶ Life-cycle 함수를 이용한 state 변수 지정

 

초기화가 끝난 함수를 자동으로 불러오는 함수를 사용합니다. componentDidMount(  ) 함수 사용하여 주기적으로 수행할 수 있는 함수를 만듭니다. 1초에 한번씩 불러오는 clock(  )함수를 여기에 적용합니다. 그 후 clock(  )함수를 정의하여 date객체를 new Date(  )함수로 연결합니다. 이 모든 작업은 render(  ) 함수 이전에 선언합니다. 

 

 

이렇게 되면 초당 작동을 하게되는데 여기서 눈여겨봐야 할 명령어는 componentDidMount(  ), timerID, setState(  ) 입니다. 초기화 된 Component state를 함수를 이용하여 초당 변경시키는 방식입니다. 

 

---

 

차이점의 개념을 잡아보면 props를 이용하는 경우 외부 ReactDOM.render(  ) 함수에서 Timer component를 정의해서 사용하였는데 state에서는 props가 내장되어 있기때문에 ReactDOM.render(  )함수에서는 Component명만 선언하고 Class Component내에서 함수를 전부 정의하여 코딩을 하는 개념으로 보시면 됩니다. 

 

변하는 시간만 가지고는 Props를 이용한 함수형 Component가 쉬운데 향후 좀 더 다양한 예제를 통하여 State를 이용하는 이유를 좀 더 알아보도록 하겠습니다. 

 

어렵네요.  글로 설명하기 위해서 몇번이나 연습을 해 보았습니다. 쓸때는 이해가 갑니다만 외워서는 할 수가 없겠네요. 일단 이해가 되고 다른 개발자분들이 만든 내용을 이해할 수만 있다면 향후 뭔가를 만들어볼때 어렵지 않을 것이라 확신합니다. 

 

참고로 state를 초기화한 것을 받을경우 this.state로 정의하나 향후 변수값을 받을 경우 this.setState로 정의해 줘야 합니다. 

 

그런데 이것만 보면 사실 어렵고 코딩이 긴데 좀 더 이해를 위해서 간단한 예제를 보도록 하겠습니다.