React 세번째 이야기 (TIL 27일차)

"하면 될 거 같은데 안 될 때가 제일 답답하죠."

<a href='main.html'>Main</a>

HTML 에서 위와 같은 구문이 있다고 하면, 우리는 a 라는 태그 이름을 통해 이것이 어딘가로 링크를 연결하고 있다는 것을 알 수 있고, 그 주소는 attribute인 href 로 연결되어 있다는 것을 알 수 있습니다. Main 을 누르게 되면 main.html 로 연결되는 것이죠.

리액트의 컴포넌트도 마치 HTML 에서 태그를 쓰는 방법과 유사하게 컴포넌트를 사용할 수 있습니다.

class Main extends Component {
    render() {
      return (
        <header>
          <h1>This is Main!</h1>
        </header>
      );
    }
  }

<Main></Main>
// 방법이 대략 이러하다는 점을 설명하기 위한 예시입니다.

위의 예시에서도 나타나듯이 Main 이라는 컴포넌트를 만들고 이를 불러올 때 HTML 의 태그처럼 사용하고 있죠. 화살표함수로 만든 Main 컴포넌트는 <Main> 이라는 형식으로 호출되었을 때, <header> 태그와 <h1> 으로 감싸진 This is Main! 을 보여주게 됩니다.

"This is Main!" 이라는 부분을 바꾸고 싶다고 가정해보겠습니다. 위의 식을 찾아가서 바꿀 수도 있겠죠. 하지만 만약 여러번 호출하면서 각기 다른 값을 넣고 싶다면요? 일일히 Main 에서 수정을 해주는 건 비효율적일 수 있습니다. 이때 우리는 props 라는 react 에서의 개념을 활용해 우리가 전달하고자 하는 값을 전달할 수 있습니다.

class Main extends Component {
    render() {
      return (
        <header>
          <h1>{this.props.content}</h1>
        </header>
      );
    }
  }

<Main content="This is Main!"></Main>

호출하는 쪽에서 마치 태그의 어트리뷰트를 활용하듯이 이름(content)과 내용("This is Main!")을 전달하고 이를 받는 함수의 this.props 의 하위에 .이름(content) 을 붙여주면 컴포넌트를 하나의 기능으로 만들고 우리가 원하는 값을 전달할 수 있는 겁니다.

동일한 기능을 함수 컴포넌트로 변환하여 작성하면 이렇게 됩니다.

const Main = (props) => {
    return (
      <header>
          <h1>{props.content}</h1>
        </header>
      );
    }

함수의 매개변수 부분에 props 를 넣어주고 this 가 빠졌다는 점이 다를 뿐, 클래스를 사용한 컴포넌트와 함수 선언을 활용한 컴포넌트는 동일하게 작동합니다. 물론 세부적으로는 다르게 작동하는 것들이 있다고 하니 이 부분은 좀 더 공부를 할 필요가 있을 것 같네요.

모든 라이브러리와 프레임워크가 그렇지만 제일 중요한 것은 아마도 공식 문서를 보고 직접 사용방법을 습득할 수 있는 경지에 다다르는 게 아닐까 싶습니다. 리액트 공식문서 에서 props 와 관련한 추가 정보를 확인할 수 있습니다.