[React] react-create-app 정리

1. 컴포넌트 제작하기

• 구조

• App.js

• Subject.js

• TOC.js

• Control.js

• Content

• CreateContent.js

• UpdateContent.js

• 컴포넌트 사용하는 법

• 아래와 같이 사용하는 쪽의 component에 import를 해주고 사용될 이름을 함께 입력

import Subject from "./components/Subject";

render 함수의 return 부분에 설정해 준 이름으로 사용할 위치에 태그를 생성한다.

<Subject></Subject>

1. state 사용하기

• state는 언제 사용?

• React에서 동적인 데이터를 사용할 때 state를 사용함

• 특징

• 아래와 같은 형식으로 constructor안에 초기값을 설정해 주어야 한다.

• this.state = {}

• state값 변경은 직접 조작할 수 없다.

• state가 변경될 때마다 setState메소드를 사용해서 변경해야 한다.

• state와 setState 예시

• Increase 버튼을 클릭할 때 마다 Counter 컴포넌트 state의 number값을 변경시키는 것이 목표

1. Counter컴포넌트의 state에 number를 추가한다.

2. number를 표시할 위치에 {this.state.number}를 추가한다.

3. setState를 사용해서 number값을 변경한다.

class Counter extends React.Component {
  constructor(props) { // 1. 생성자의 state에 number를 추가한다.
    super(props); 
    this.state = { // 이 컴포넌트의 state 설정
      number: 0 // number의 초기 값 설정
    };
  };

handleClick() {   // 3. setState를 사용해서 number값을 변경한다.
    this.setState(() => {
      return {number: this.state.number + 1};
    });
  };

  render() {
    return (
      <div>
        <h2>{this.state.number}</h2> // 2. state의 number 값을 표시
        <button>Increase</button>
      </div>
    );
  };
}

1. 이벤트 사용하기

• 사용자가 브라우저에서 특정 DOM 요소와 상호작용하는 것을 이벤트라고 부름

• ex) onClick, onChange

• 사용자의 특정 행동에 대해 특정 이벤트네 대해 처리할 수 있음

• 하위 컴포넌트에서 상위 컴포넌트로 값을 넘겨줄 수 있음

• 하위 컴포넌트에서 onSumit 함수에 title과 desc 값을 넣어 넘긴다.

class CreateContent extends Component {
    render (){
      return (
            <form action="/create_process" method="post"
                onSubmit={function(e){
                        ...
                  this.props.onSubmit(
                    e.target.title.value,
                    e.target.desc.value
                  );
                    }.bind(this)}
                  >
            );
        }

상위 컴포넌트에서 다음과 같이 값을 받을 수 있다.

<CreateContent onSubmit={function(_title, _desc){
        ...
      }.bind(this)}></CreateContent>

1. update 페이지에서 form input에 초기데이터 설정하기

1. state에 props를 사용해서 부모 컴포넌트에서 데이터를 가져온다.

2. 새로운 값들을 변경해주기 위해 setState로 설정한다.

3. id값을 hidden 값으로 함께 보내주어야하고 onChange를 통해 value 값이 변경될 때 마다 즉시 input에 적용되도록 한다.

class UpdateContent extends Component {
  constructor(props){
    super(props);
    this.state = {  // 1.state에 props를 사용해서 부모 컴포넌트에서 데이터를 가져온다.
      id:this.props.data.id,
      title: this.props.data.title,
      desc: this.props.data.desc
    }
    this.inputFormHandler = this.inputFormHandler.bind(this);
  }
    inputFormHandler(e){  // 2. 새로운 값들을 변경해주기 위해 setState로 설정한다.
      this.setState({[e.target.name]:e.target.value});
    }

    render (){
        ...
          <form action="/create_process" method="post"
            onSubmit={function(e){
              e.preventDefault();
              this.props.onSubmit(
                this.state.id,
                this.state.title,
                this.state.desc
              );
            }.bind(this)}
          >
            <input type="hidden" name="id" value={this.state.id}></input> 
                // 3-1. id값을 hidden으로 같이보내준다.
            <p>
              <input 
                type="text" 
                name="title" 
                placeholder="title"
                value={this.state.title}
                onChange={this.inputFormHandler}/>  
                // 3-2. value값이 변경될 때 함께 바꾸어준다.
            </p>
            ...
          </form>
        </article>
      );
    }