리액트 컴포넌트에 데이터 넣기

컴포넌트에 데이터를 넣는 방법

저번 포스팅을 통해서 우리는 여러 프로필을 불러왔습니다. 이제는 불러온 그 프로필들을 우리가 비워두었던 state에 넣고 그 값을 또 만들어두었던 <Profile />컴포넌트에 전달하면 됩니다. 값들은 배열이고 우리는 그 배열을 어떻게 넣을 수 있을까요? this.state.profiles = "우리가 가져온 프로필 배열" 의 형태로 넣으면 될까요 ?

this.state.키 = "값"의 형태로 직접 데이터를 삽입하면 안됩니다. 

this.setState 함수의 이용

state에 값을 넣으려면 반드시 this.setState 함수를 이용해야 합니다. 리액트의 경우 state의 변화가 일어나면 다시 render 함수가 실행되고 바뀐 값 부분을 넣습니다. 하지만 이러한 리액트의 기능을 이용하려면 state의 값을 setState를 이용했을 때만 가능하고 직접 값을 삽입했을 때는 다시 render함수가 호출되지 않습니다.

setState 함수의 인수

setState에는 어떤 값이 인수로 들어갈까요? 답은 객체와 함수입니다.

위의 코드를 보면 state.number은 1입니다. 이 값을 1 증가시키려면 객체를 전달할 수도 있고, 함수를 전달할 수도 있습니다. 함수를 전달하면 첫번째 인수는 그 전 state를 나타냅니다. 그래서 이름을 prevState라고 지었습니다. 두 가지 중 어느 방법을 사용하셔도 상관없지만 한 가지 주의해야 할점은 객체를 전달했을 시엔 "통합과정"이 일어난다는 것입니다. 만약 this.setState({같은 객체});this.setState({같은 객체});this.setState({같은 객체}); 라는 코드가 있다고 생각해보세요. 우리의 경우 state.number의 값을 1씩 증가시키는 코드였습니다. 세번 호출했으니 number를 3 증가시켰을까요? 정답은 "아니다." 입니다.

리액트를 이럴 경우 객체를 추출해서 단일 객체로 통합하는 과정이 있고, 한 번에 실행시킵니다.  

number의 경우 3이 증가한 것이 아니라 1이 증가합니다. 의도한대로 3을 증가시키려고 한다면 함수를 이용하셔야 합니다.

state에 받아온 배열 전달하기

getProfile이라는 함수를 통해서 우리가 받아온 데이터를 state에 넣어보도록 하겠습니다.

async와 await의 경우엔 이 시리즈의 초반 부분에 다루었었죠? 비동기 객체를 다루는 방법입니다. state가 빈 객체이기 때문에 {profiles}를 바로 삽입했습니다. 그리고 componentDidMount 함수의 내부도 callApi에서 getPropfile을 호출하도록 변경했습니다. 이제 state에 값이 제대로 전달되었는지 확인해볼까요?

render 함수 내에서 state 값을 받아서 콘솔로 보여주는 코드입니다.

undefined에서 Array(12)로 변경된 것을 알 수 있습니다.

약간 흐릿하지만 에러없이 값이 바뀌었다는 것을 알 수 있습니다. 콘솔이 2번 찍힌 이유는 state의 값이 변경되었기 때문에 다시 한번 render함수가 실행되었기 때문입니다. 자식 컴포넌트들도 만들었고, 데이터도 가져와 state에 넣었으니 큰 일은 다한셈입니다. 약간의 휴식을 가지고 다음 포스팅을 봐주세요.

다음 포스팅에서는 자식 컴포넌트에까지 값을 전달해서 이미지와 name, username, password 등을 화면에 나타내보도록 하겠습니다.