헬퍼 함수인 getStyle()은 top, bottom, left, right 같은 CSS 스타일의 반복을 추상화하여 창 너비에 따라 다른 값을 반환한다. 이런 이유로 getStyle()은 값과 승수 m을 전달받아 픽셀을 반환한다(React에서는 CSS에 숫자를 사용하면 픽셀로 바뀐다).

그 외의 코드는 간단하다. 상태와 속성을 이용하여 네 개의 <div/> 엘리먼트를 렌더링하는 render() 메서드를 구현하면 된다. constructor()에서 각각 특별한 스타일을 선언하고 있다.

 

예제 코드 6.12 상태 값을 스타일에 이용해서 엘리먼트 크기 변경하기

...
    render() {
        return <div>
            <div className="radio-tagger" style={this.state.taggerStyle}>
                <input type="radio" name={this.props.name} id={this.props.id} />
                <label htmlFor={this.props.id}>
                    <div className="radio-text" style={this.state.textStyle}> {this.props.label}</div>
                    <div className="radio-outer" style={this.state.outerStyle}>
                        <div className="radio-inner" style={this.state.innerStyle}>
                            <div className="radio-selected" style={this.state.selectedStyle} />
                        </div>
                    </div>
                </label>
            </div>
        </div>
    }
}

---