[React] TIL

객체안에 컴포넌트 넣어서 관리하기

위 컴포넌트는 First, Second, Third 상단 바를 공유하고 있는데, First를 누르면 First를, Second를 누르면 Second를, Third를 누르면 Third를 아래에 보여주는 기능을 가지고 있다.

• 어떤 방법으로 이게 가능한 걸까?

const obj = {
	0: <First />,
  	1: <Second />,
  	2: <Third />,
}

obj라는 객체의 키값으로 컴포넌트를 선언해준다. 컴포넌트는 객체의 키값으로도 사용이 가능하다...

export default class ActiveTab extends Component {
  state = {
    activeId: 0,
  }

  clickHandler = (id) => {
    this.setState({ activeId: id });
    console.log(this.state);
  };

  render() {
    return (
      <div className="wrapper">
        <ul className="tabs">
          <li onClick={() => this.clickHandler(0)}>First</li>
          <li onClick={() => this.clickHandler(1)}>Second</li>
          <li onClick={() => this.clickHandler(2)}>Third</li>
        </ul>
        <div className="contents">{obj[this.state.activeId]}</div>
      </div>
    );
  }
}

• state에 activeId라는 키를 선언해주고, li를 클릭하면 미리 선언된 인자의 값으로 state값을 바꿔주는 clickHandler라는 메서드를 선언한다.
• 그럼 각자의 li태그를 클릭하면 state의 activeId의 값을 변경해주고, 업데이트된 값을 처음에 선언했던 객체의 키로 사용해서 컴포넌트를 불러온다.

하나의 함수로 state의 여러 키값을 변경하기

class OnChange extends Component {
  state = {
    email: "",
    password: "",
  };

  inputHandler = (e) => {
    this.setState({ [e.target.name]: e.target.value });
  };

  render() {
    const { email, password } = this.state;
    console.log(this.state);

    return (
      <div className="onchange-wrapper">
        <div className="top">
          email: <input name="email" onChange={this.inputHandler} />
          password: <input name="password" onChange={this.inputHandler} />
          <button>SUBMIT</button>
        </div>
        <div className="contents">
          <div>{email}</div>
          <div>{password}</div>
        </div>
      </div>
    );
  }
}

• state에 email과 password 2개의 키를 선언하고, input태그에 name이라는 속성을 만들어서 속성값으로 state의 각각의 키를 준다.
• inputHandler라는 메서드를 선언해서 각각의 input태그에 onChange에 메서드를 지정해준다.
• 타겟으로 지정한 name속성 값을 setState의 키로 넘겨주고, value값을 키값으로 넘겨준다.
• 그러면 email과 password의 값을 각각 다른 함수로 만들어줄 필요가 없다.