"시행착오"
코드스테이츠 부트캠프의 기본 방침은, "물고기를 주기보다는 물고기 낚는 법을 알려주어라." 라고 하는 탈무드의 격언에 잘 드러나 있습니다. 기초자료가 아예 없는 것은 아니지만, 정말 가이드라인과 같은 최소한의 내용으로 구성된 경우가 많습니다.
그러다보니 때로는 빙빙 돌고 헤매야만 할 때가 생기기도 합니다. 제게는 리액트를 배우는 과정이 그랬는데요. 제공되는 자료를 넘어 공부하려다 보니 여기저기 참고하는 자료들이 다 조금씩 그 방법이 달라 난감했었습니다.
예를 들면, 유튜버 생활코딩 님의 리액트 강의에서는 기본적으로 클래스 문법을 사용하고 있는데요.
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div className='App'>
...내용
</div>
);
}
}
export default App;그런가하면 같은 클래스 문법을 사용해도 노마드코더 님의 경우는 다음처럼 사용을 하고 있었습니다.
import React from 'react';
class App extends React.Component{
render() {
return (
...내용
);
}
}import 를 할 때, { Component } 를 별도로 불러와주면 React.Component 라고 적을 필요가 없어지고, 그렇지 않은 경우에는 클래스 문법을 쓸 때, React.Component 라고 명시해주는 것을 제외하면 위의 2개는 달리 차이는 없다고 할 수 있습니다. 다만 이걸 이해하기까지 시간이 좀 걸렸던 것 뿐이죠..
또 다른 방법으로는 함수 컴포넌트가 있습니다. 자바스크립트에서 함수를 만드는 방법처럼 사용하는 것인데요.
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}위의 예시는 리액트 공식 문서의 Components and Props 부분에 나와있는 함수 컴포넌트의 예입니다. function 으로 시작하고 함수의 이름을 가진다는 점, ( ) 안에 매개변수가 들어간다는 것, 중괄호로 묶고 리턴으로 함수의 결과를 반환한다는 점이 자바스크립트의 함수와 같은 방식입니다. 다른 것이 있다면 함수의 이름을 Pascal Case 를 사용해 대문자로 시작한다는 것과(그래야 React 가 이것을 컴포넌트로 인지한다고 합니다), 리턴 안에 jsx 문법을 활용했다는 점 정도겠죠.
물론 이 함수 컴포넌트를 클래스 컴포넌트로도 정의할 수 있습니다. 위의 함수를 다시 한 번 가져오고 클라스로 똑같은 정의를 아래에 첨가해보도록 하겠습니다.
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
// 이 둘은 React의 관점에서 볼 때 동일한 컴포넌트입니다.
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}공식문서에서는 state 를 설명하면서 기존의 함수 컴포넌트를 클래스 컴포넌트로 전환합니다. 그 이유는 state 는 클래스 컴포넌트에서만 사용이 가능하기 때문인데요. 정확히 말하면 과거형이라고 봐야 합니다. 왜냐하면 React 버전 16.8부터 Hook 이라는 것이 새로 추가되면서, 기존의 클래스를 바탕으로 한 코드를 작성할 필요 없이 state 를 사용할 수 있게 되었기 때문입니다.
이를 위해 가장 기본으로 배우는 새로운 함수가 바로 useState 함수입니다. 여기에 대해서는 아직 공부할 것이 많아 다음 글에서 이어가볼까 합니다.
참고로 공식 문서의 한글 버전이 state 와 상태 라는 말을 번갈아 사용해 혼란을 주는 경우가 있는데요. 상태 === state 라고 이해하면 될 것 같습니다. 그리고 사소한 것이지만, 구조분해할당에 대한 선이해가 있어야 useState 에 관한 공식문서를 좀 더 잘 이해할 수 있습니다.
