react 실습

import React from 'react';
import './_mainlist.css';
import styled from 'styled-components';

class MainList extends React.Component {
  // 렌더링 객체
  constructor(props) {
    super(props);
    this.state = {
      ListData: [
        {
          text: '상품문의',
          content: '제목이 출력되겠지요 누르면 답변이 아래로 떨어집니다. 흔히 아코디언UI라고 하지요',
          answer: '답변1 다람쥐 헌 쳇바퀴에 돌고파'
        },
        {
          text: '상품문의',
          content: '1제목이 출력되겠지요 한줄일때는 이렇게',
          answer: '다람쥐 헌 쳇바퀴에 돌고파 다람쥐 헌 쳇바퀴에 돌고파 다람쥐 헌 쳇바퀴에 돌고파 다람쥐 헌 쳇바퀴에 돌고파'
        }
      ]
    }
  }
  render() {
    return (
      <section>
        <dl>
        </*map을 이용해서 match rendering*/>
          {this.state.ListData.map((list, i) => {
            return (
              <div>
                <ListPrint
                  key={i}
                  text={list.text}
                  content={list.content}
                  answer={list.answer}
                />
              </div>
            )
          })}
        </dl>
      </section>
    )
  }
};

class ListPrint extends React.Component {
  constructor(props) {
    super(props);
    // 기본값 설정
    this.state = {
      showdd: false,
      rotateimg:false
    }
    this.dtclick = this.dtclick.bind(this)
  }
  dtclick(e) {
    e.preventDefault();
    this.setState({
      // 토글 하는 부분
      showdd:!this.state.showdd,
      rotateimg:!this.state.rotateimg
    }
    )
  }
  render() {
    return (
      <div>
        <dt onClick={this.dtclick}><span>{this.props.text}</span>{this.props.content}<img src={require('../../img/down.svg')} width="32" height="19" alt="내용확인" className={this.state.rotateimg ? "imgdw": "imgup"}/></dt>
        {/*이 부분에 상태 연결*/}
        <dd className={this.state.showdd ? "on":"off"}>
          {this.props.answer}
        </dd>
      </div>
    )
  }
}