'코딩 연습/React'에 해당되는 글 3건

Component State는 컴포넌트 안에서 쓸 수 있는 객체이다.

그리고 this.setState()를 활용하여 리액트만의 장점을 확인해보자

App 컴포넌트 밖에 있던 movies 객체를 컴포넌트 안에 위치한 state에 담았다.

• state는 컴포넌트 안에서만 쓸 수 있는 객체이다.

• 특이점은 함수를 통해 state에 담긴 값이 변경될 경우 자동으로 render() 메소드를 재실행시킨다.

마운트 후 componentDidMount() 메소드가 호출된다.

• setTimeout()은 this.setState()를 원하는 시간(5000=5초)이 지나서 호출되도록 하기 위함이다.
• () => {}은 function(){}과 동일한 내용이다.
• ...this.state.movies를 기존 데이터인 moives를 전부 읽어오는 것이다.
• 따라서 기존 데이터에 새로운 영화 데이터를 추가 입력하여 state의 값에 변화를 주었다.   

state의 값이 변화가 되면서 render() 메소드는 재실행된다.

• state에 추가로 저장된 movies 데이터를 Movie 컴포넌트로 전달하여 기존 영화정보에서 5초 후 더 늘어난 영화 정보가 노출된다.

삼항연산자를 활용하여 리액트만의 극적인 효과 나타내기

동시에 나만의 메소드 만들기

state에 작성했던 movies 값을 비워두자

• this.setState()에 movies 값을 그대로 가져온다.

render() 메소드 안에 작성했던 map() 메소드를 가져온다

• _renderMovies는 나만의 메소드이므로 리액트 자체 메소드와 구분 짓기 위해 _(언더바)를 사용한다.
• map()을 통해 만들어진 배열을 새로이 movies 변수에 담아서 반환한다.

삼항연산자를 사용하여 state에서 movies 객체의 존재에 따라 데이터 출력을 달리한다.

• state에 movies 객체가 존재하면 _renderMovies()를 실행하여 영화 정보가 출력되도록 한다.
• state에 movies 객체가 없다면 'Loading' 문자만 웹브라우저에 노출된다.
• 따라서 state에서 아무런 값이 없는 상태로 마운트된 후 5초가 지나서 componentDidMount()가 실행되어 state에 movies 객체가 삽입된다.
• state에 값에 변화가 생기면서 render()를 재실행한 후 _renderMovies()를 통해 Movie 컴포넌트에 영화 정보를 전달하여 웹브라우저에 노출시킨다.

PropTypes으로 데이터 형태 확인하기

데이터 형태 확인을 통해 많은 버그를 잡을 수 있다. 우선 객체내 각 요소에 부합하는 propTypes를 할당한다 

객체내 각 요소에 PropTypes를 규정하면 데이터 형태를 확인한 후에 다음 단계로 넘어간다

• PropTypes에는 string, number, bool, func 등 여러 타입을 사용할 수 있다.
• isRequired를 사용하게 되면 해당 요소가 존재하지 않을시 에러를 발생시킨다. 따라서 반드시 요소 값을 입력해야한다.
• PropTypes를 확인하고 유효한 경우에만 this.props.poster로 값이 전달된다.

map() 메소드를 활용하여 각 배열의 값을 일일이 컴포넌트에 전달하도록 코드를 작성하는 번거로움을 줄여보자

배열의 요소가 늘어날수록 그만큼 컴포넌트에 전달하는 데이터가 늘어 코드량이 늘어난다.

• movieTitles, movieImages 변수를 movies로 통합하여 객체 형태로 2개의 데이터를 담아 배열에 담는다.
• map() 메소드를 활용하여 반복적인 코드를 줄인다.

map() 메소드는 배열의 모든 요소에 하나씩 작성된 함수를 통해 새로운 배열 형태로 반환한다.

각 요소에 id 값을 주기 위해 index를 추가로 작성할 수 있다.