리액트로 값 전달해보기

저번 포스팅에서는 컴포넌트를 작은 컴포넌트를 하나 만들어서 App 컴포넌트에 넣어봤습니다.

지금까지 진행한 코드입니다.

우선은 저번 포스팅에서 지웠어야 했지만 깜빡한 관계로 App.css에 있는 것들을 다 지워주세요. 그리고 우리가 직접 만들 것을 보면서 데이터가 어디에서 어디로 전달되는 지 확인해보도록 하겠습니다.

우리가 같이 만들어 볼 프로필 생성기입니다.

리액트에서 데이터는 큰 컴포넌트에서 작은 컴포넌트로 전달됩니다. 그리고 데이터는 한 곳에 있습니다. 바로 제일 큰 컴포넌트입니다. 해당 화면은 3개의 컴포넌트로 되어있습니다. 그 3개는 App 컴포넌트(파란화면) Profile 컴포넌트(흰색 네모 상자), ProfileImage 컴포넌트(이미지 부분)이고, 여기서는 App 컴포넌트에 모든 데이터들이 들어가있고, 그보다 작은 컴포넌트들에게 전달되는 것이죠. 

// App.js

class App extends Component {

  state = {
    name: "react",
    nickname: "helloworld"
  }

  render() {
    return (
      <div className="App">
        <Profile name={this.state.name}/>
        <Profile name={this.state.nickname}/>
      </div>
    );
  }
}

//profile.js

function Profile({name}){
  return (
    <h1>{name}</h1>
  )
}

App.js와 movie.js에 해당 코드들들 붙여넣어보세요. state는 컴포넌트에서 정보를 저장하는 곳입니다. 일단은 name과 nickname이라는 값을 저장했습니다. 그리고 return 구문사이에 있는 태그형태의 자바스크립트에 값을 전달했습니다. 값은 {} 사이에 넣었다는 것을 눈치채셨나요? 그리고 Profile 컴포넌트가 값을 받아서 출력시키고 있습니다. 

두개 컴포넌트에 다른 값을 전달했기 때문에 다르게 출력되었습니다. 큰 컴포넌트에서 작은 컴포넌트로 값이 전달된다는게 좀 이해되시나요?

jsx란 무엇일까요?

값을 전달하는 것은 알겠는데 왜 자바스크립트 사이에 태그들이 있는지 머리가 복잡하시나요? 저 태그들은 jsx라고 합니다. jsx는 문자도, html태그도 아니며 리액트의 템플릿 언어입니다. 그리고 jsx에 자바스크립트를 넣을 땐 {}를 통해서 삽입하면 됩니다. 위에서 데이터 값을 전달했던 것처럼요.

꼭 기억해두셔야 할것은

리액트는 jsx라는 템플릿언어를 사용하며 해당 언어는 html태그와 똑같이 생겼습니다. 그리고 {}를 통해서 자바스크립트를 삽입할 수 있습니다. 가장 큰 컴포넌트에 값을 저장하고 작은 컴포넌트에 전달하는데, 데이터를 저장하는 곳은 state, 그리고 작은 컴포넌트에서는 props를 통해서 데이터를 받습니다.(예시에서는 다루지 않았습니다.)

데이터를 하나하나 직접 기입하기 보다는 기존에 있는 데이터를 가지고 오는 것이 더 편하겠죠? 다음 포스팅에서는 fetch api를 통해 데이터를 가져오는 방법을 알아보도록 하겠습니다.

공감은 제작자에게 큰 힘이 됩니다.