리액트 애플리케이션 설계 특징

•  리액트 애플리케이션은 여러 컴포넌트가 서로 통신하는 구조이다.
• 여러 컴포넌트로의 진입점 역할을 하는 메인 컴포넌트가 필요하다. 
• 컴포넌트 상속보다 컴포지션을 선호한다. 

 

 이번에 작성하는 코드를 통해 props, state 사용과 부모 - 자식 컴포넌트간 데이터를 효율적으로 전달하고 구조를 설계하는 방법을 익혔다. 

 

부모와 자식 컴포넌트 관계 

 자식이 부모 클래스를 상속받는 구조가 아닌, 부모 컴포넌트가 하나 이상의 자식 컴포넌트를 포함하는 구조를 의미한다. 

 

컴포지션이란?

 모든 컴포넌트 클래스가 React.Component 를 상속받고 부모 컴포넌트가 자식 컴포넌트를 랜더링한다는 뜻이다. 부모, 자식 모두 React.Component를 상속받는다. 

 

부모 컴포넌트에서 자식 컴포넌트로 데이터를 어떻게 넘기는가,  props와 state! 

 가령, 상품 목록에는 여러개의 상품이 있기 때문에 여러개의 Card 컴포넌트(자식)가 필요하다. Card 컴포넌트를 상품 개수만큼 하드코딩 하는 것은 비효율 적이다. 한 개의 컴포넌트로 처리하는 방법이 필요하다. 가능한 최상위 부모 컴포넌트에서 데이터를 관리하고 자식 컴포넌트로 전달하는 구조가 가장 효율성이 높다. 리액트에서 부모와 자식 컴포넌트간 데이터전달은 props 객체를 사용한다. 

 

<div className='card-body'>
  <h4 className='card-title'>{this.props.productName}</h4>
  price: <strong>{this.props.price}</strong>
  <p className='card-text'>{this.props.desc}</p>
</div>

props 객체의 사용 

• this.props 를 통해 접근한다. 
  • 필요한 상품 정보를 가져오는 것 

위 속성들은 JSX에 정의된 props 필드명들을 통해 전달 받은 것이다. 

<Card img="img/strings.png" alt="strings" productName="Strings" price='100.0'
desc="A very authentic and beautiful instrument".>

img, alt, productName, price, desc 필드를 전달받았다. 

 

리액트 컴포넌트를 만드는 방법 

1. React.Component를 상속받는 클래스를 정의한다. 

2. React.Component 의 render()메소드를 오버라이드한다.

 

다음은 2개의 Card 엘리먼트를 반환하는 CardContainer 클래스이다. 

class CardContainer extends React.Component{
render() {
return(
  <div>
    <Card key='1' img="img/strings.png" alt="strings" productName="Strings"price='100.0' desc="A very authentic and beautiful instrument!!"/>
    <Card key='2' img="img="img/redguitar.jpeg"alt="redg" productName="Red Guitar" price='299.0' desc='A really cool red guitar that can produce super cool music!!"/>
  </div> 
  );
 }
}

• 부모 div 안에 2개의 Card 엘리먼트가 있다. render() 메서드는 단 한개의 리액트 엘리먼트만 반환할 수 있다. 
• Card 컴포넌트에 보면 key 속성이 있는데 엘리먼트가 두개다보니까 구분해주기 위한 지정자인것이다. 리액트는 이 키를 이용해 재렌더링 해야하는 컴포넌트를 파악한다. 컴포넌트는 props 객체에서 key를 참조할 수 없다. 리렌더링 대상 파악, 어떤 키의 추가, 제거, 변경해야하는지 모니터링, 어떤 컴포넌트를 유지해야하는지 결정하기 위한 목적이다. 

 

render()메서드에서 반환하는 상품 정보를 map()메서드를 활용하여 엘리먼트 리스트 생성

// 카드를 나타내는 JSX 엘리먼트의 리스트 
    const cardItems = cards.map(card =>
        <Card key={card.id} img={card.img} alt={card.imgalt} productName={card.productName} price={card.price} desc={card.desc}/>
        );
    return(
      <div>
        {cardItems}
      </div> 
      );

key를 {card.id}로 통합하고 card엘리먼트들을 하나의 리스트인 cardItems 로 만들었다. map 을 통해 지정된 key를 가지고 불러오게끔 했다. 

 

cardItems 정의를 보다 심플하게 아래처럼 바꿀 수 있다. 

const cardItems = cards.map(
	card=> <Card key={card.id} {...card} />
);

 ...구문은 card클래스의 모든 속성을 Card컴포넌트로 전달한다. card객체의 속성명과 Card컴포넌트에 접근하는 props의 필드명이 동일하기 때문에 에러가 발생하지 않는다. card객체에는 key대신 id필드가 있기 때문에 key속성은 직접 추가해줘야한다. 

 

state 객체 초기화 

 state객체는 리액트 컴포넌트의 생성자에서 초기화한다. 

1. 매개변수 props를 부모객체에 전달한다. 

2. state 객체를 초기화한다.

 

state 설정 

 state 객체에 값을 저장할 때는 컴포넌트 클래스의 setState()메서드를 사용한다. 

 

예제를 통해 한 작업 

- state 객체에서 상품 카드 정보 조회 

- 부트스트랩 프레임워크를 사용하여 상품 페이지 스타일링 

 

컴포넌트 안에 상품정보를 모두 하드코딩하는 것은 옳지 않은 방법이다. json 파일에 저장된 모든 상품정보를 읽어와 state에 저장해야한다. 

 

fetch() 

 cards.json 파일에서 데이터를 읽고 state 객체에 저장한다. 

 

라이프사이클 이라는 메서드 개념 

 해당 컴포넌트의 라이프 사이클 이벤트가 발생할 때마다 실행되는 메서드다. 예를들어 컴포넌트가 마운트되면 componentDidMount() 메서드를 호출한다. 이 메서드를 오버라이드하면 컴포넌트가 마운트될 때마다 해당 코드가 실행된다. 외부 소스에서 전달받은 데이터로 state를 초기화하는 로직은 componmentDidMount()메서드에 넣는 것이 좋다.