예제 코드 6.11 DOM 이벤트에 연결하기 위한 라이프사이클 이벤트 사용하기

class Radio extends React.Component {
    constructor(props) {
        super(props)
        this.handleResize = this.handleResize.bind(this)
        let order = props.order
        let i = 1
        this.state = { ---- 스타일을 상태에 저장한다.
            outerStyle: this.getStyle(4, i),
            innerStyle: this.getStyle(1, i),
            selectedStyle: this.getStyle(2, i),
            taggerStyle: {top: order*20, width: 25, height: 25}
        }
    }
    getStyle(i, m) { ---- 함수를 사용하여 변경되는 너비와 승수에 따라 여러 가지 스타일을 생성한다.
        let value = i*m
        return {
            top: value,
            bottom: value,
            left: value,
            right: value,
        }
    }
    componentDidMount() {
        window.addEventListener('resize', this.handleResize) ---- 미지원 window 이벤트 리스너를 등록한다.
    }
    componentWillUnmount() {
        window.removeEventListener('resize', this.handleResize) ---- 미지원 window 이벤트 리스너를 제거한다.
    }
    handleResize(event) { ---- 새로운 창 크기에 따라 라디오 버튼의 크기를 조절하는 함수를 구현한다.
        let w = 1+ Math.round(window.innerWidth / 300)
        this.setState({
            taggerStyle: {top: this.props.order*w*10, width: w*10, height: w*10},
            textStyle: {left: w*13, fontSize: 7*w}
        })
    }
    ...

---