40_Props, State, Event 활용하기

리액트로 westagram이 잘 돌아가는 모습을 보며 좋아했엇는데...

지난 주 수요일부터 Github를 이용해 팀별로 westagram 코드를 관리하고, 동적인 요소를 넣기 위해 Event를 배우기 시작하며 시간이 어떻게 지나갔는지도 모르겠다.

며칠 간의 기록을 오늘에서야 정리하려고 한다.
아직 뜬구름처럼 남아있는 내용들이라 구체적이지 않을 수 있고, 횡설수설하는 것처럼 보일 수도 있다. 잊지 않기 위해 기록으로 남기고 추후에 머리 속에서 정리가 되거든 다시 한 번 수정을 할 계획이다.

1. 삼항 연산자의 중첩

• 직관적으로 이해하기 힘들기에 지양하는 코드
• 조건문을 중첩하려거든 if문과 삼항 연산자를 혼합하여 사용하면 이해하기가 쉬워진다.

// bad
idValidation:
  this.validationMode === 'idCheck'
    ? !!(value.indexOf('@') + 1)
      ? (this.idValidation = true)
      : (this.idValidation = false)
    : this.idValidation
    ? (this.idValidation = true)
    : (this.idValidation = false),

// good
if (name === 'id') {
  value.indexOf('@') !== -1
    ? this.setState({ idValidation: true })
    : this.setState({ idValidation: false });
    }

2. setState에서 조건을 넣어 state를 수정하는 방법

• 필요한 부분에서만 this.setState를 사용하여 state를 수정할 수 있다. 하나의 setState에서 모든 state를 수정하지 않아도 된다.

// good
if (name === 'id') {
  value.indexOf('@') !== -1
    ? this.setState({ idValidation: true })
    : this.setState({ idValidation: false });
    }

// bad
validationCheck = (name, value) => {
  this.setState({
    validationMode:
      name === 'id'
        ? (this.validationMode = 'idCheck')
        : (this.validationMode = 'pwCheck'),
    idValidation:
      this.validationMode === 'idCheck'
        ? !!(value.indexOf('@') + 1)
          ? (this.idValidation = true)
          : (this.idValidation = false)
        : this.idValidation
        ? (this.idValidation = true)
        : (this.idValidation = false),
    pwValidation:
      this.validationMode !== 'idCheck'
        ? value.length > 4
          ? (this.pwValidation = true)
          : (this.pwValidation = false)
        : this.pwValidation
        ? (this.pwValidation = true)
        : (this.pwValidation = false),
    });
  };

3. 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달하는 방법

// 부모 컴포넌트
<InputBox
  data={this.state.pwInput}
  transferNameValue={this.validationCheck}
/>

// 자식 컴포넌트
class InputBox extends Component {
  constructor() {
    super();
  }

  giveValueToParent = e => {
    const { name, value } = e.target;
    this.props.transferNameValue(name, value);
  };

  render() {
    return (
      <>
        <input
          name={this.props.data.name}
          type={this.props.data.type}
          placeholder={this.props.data.placeholder}
          onChange={this.giveValueToParent}
        />
      </>

4. 렌더링 매커니즘

1) Login 페이지 랜더링
2) 도중에 자식 컴포넌트 만나서 자식 컴포넌트 먼저 렌더링
3) 자식 컴포넌트에서 호출된 함수 실행
4) 자식 컴포넌트에서 value를 인자로 부모 컴포넌트에 전달
5) 부모 컴포넌트의 함수 실행
6) Login 페이지 나머지 랜더링

Mission 2) Login | 로그인 버튼 활성화 (validation)

• 입력한 아이디와 비밀번호가 기준에 맞는 경우에만 로그인 버튼 색상이 활성화될 수 있도록 해주세요.
• ex. ID - @ 포함 / PW - 5글자 이상

:: 주말에 다시 한 번 코드를 짜봐야겠다.

Mission 3) Main | 댓글 기능

• 사용자가 댓글 입력 후 enter 를 누르거나 왼쪽의 버튼 클릭 시 댓글이 추가되도록 구현해주세요.
• 댓글 기능을 구현하기 위해서는 배열 데이터 타입을 활용해야 합니다.

:: state로 부모 컴포넌트에서 자식 컴포넌트로 전부다 넘겨주면 된다? 이게 상향식인건가?!