컴포넌트의 생명주기

1. Card 컴포넌트에서 random 위치를 한번만 사용하고 싶다면 constructor에 저장해야한다. render에 저장한다면 Deck에서 Card를 map으로 새로 랜더링할때마다 그전에 있는 random위치까지 변하게 된다. 따라서 아래와 같이 코드를 짜야한다.

class Card extends Component {
    constructor(props) {
        super(props);
        let angel = Math.random() * 90
        let Xpos = Math.random() * 50
        let Ypos = Math.random() * 40
        let transfrom =`translate(${xPos}px ${Ypos}px) rotate(${angle}deg)`
    }
    render() {
        return
        <img
         className='Card'
         style={transform:transform}
        />
    }
}

만약 render안에 x,y,angle이 있다면 그 이전에 뽑았던 카드위치마저 그대로 유지되지 않고
바뀌어 버린다. 이유는 컴포넌트에도 생명주기(life cycle)라는게 있기 때문이다. 더 알고싶다면 아래 링크를 참고바란다.

컴포넌트 생명주기