ReactJS 로 영화 웹 서비스 만들기 #8 Old Codes

 지금까지 강의로 ReactJS를 이용해 영화 웹 서비스를 만들어 보았다. 하지만, 강의가 끝났음에도 뒤를 이은 강의가 있었는데 이는 예전 방식의 ReactJS를 사용하는 법이 있다고 한다. 현재 최신 버전으로 함수들을 이용해 쉽게 state와 effect등을 사용했지만, 분명 이 전 버전의 코드들도 존재할 것이다. 어떠한 점이 다른지 복습을 하며 알아보자.

 

•  하나의 실행되는 함수를 component라고 부른다.
•  React는 component를 사용해 HTML처럼 작성한다. 이러한 Javascript와 HTML사이의 조합을 JSX라고 부른다.
• component의 이름의 첫 글자는 항상 대문자이다. ( <Com /> 의 형식이기 때문에 일반 html tag와 구분)
• React는 하나의 component를 랜더링 한다. 따라서 최종적인 App안에 다시 여러 개의 component로 구성되어야 한다.
• component와 component사이의 정보 교환 -> props
• props는 value, array, class, function()등등 JavaScript의 모든 값을 전달할 수 있다.
• props를 전달할 때는 propsName="value" 형식으로 선언한다.
• props를 받을 때는 (props) -> props.vlaue 또는 ({ vlaue })형식을 취한다. 후자를 선호.
• 반복적인 작업을 할 때는 .map()함수를 사용한다.
• 단순 list화 시킬 시 React의 유일성을 잃어버리기 때문에 반드시 key값을 추가해 주어야 한다.
• PropTypes를 사용하여 실수를 방지한다.

 

• React.Component가 가진 state를 사용하기 위하여 App을 class로 선언하고 React.Component를 extends한다.

import React from "react";

class App extends React.Component {
	render() {
    	return <h1>Hello</h1>;
    }
}

export default App;

• state를 Object로 선언하고 this를 이용해 바인딩한다. 또한 직접 변경을 하지 않고 set함수를 이용한다. (rerender을 위해)

stat = () => {
	count: 0
};
add = () => {
	this.setState(current => ({count : current.state.count +1}))
};
minus = () => {
	this.setState(current => ({count : current.state.count -1}))
};

• Component Life Cycle을 사용해 앱을 구성한다. (크게 Mounting, Update, Unmounting)
• useEffect의 역할과 동일하게 componentDidMount() 를 사용해 API를 불러왔다.
• async await문법으로 비동기 처리를  해주었다. 따라서 API가 완료되면 페이지를 보여줄 수 있다.

확실히 앞서 배웠던 React보다는 조금 더 JavaScript의 문법이 더 가까워 보였다. 결과적으로는 비슷한 모양을 하고 있지만 지금은 훨씬 더 편하게 React를 사용하는 것 같다. 다음은 중급 강의를 보며 조금 더 React의 활용을 해봐야겠다.