✔ Peer review

5/4, 리액트를 기반으로 한 인스타그램 클론 프로젝트에 대해서 서로간의 코드를 리뷰하고 리팩토링하는 시간을 가졌다. 동기들이 해준 리뷰중, 중요하다고 생각되는 부분들을 정리해보고자 한다.

1. 로그인 버튼 색깔 변경

• React 로직(수정 전)

class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      id: '',
      password: '',
      buttonColor: false,
    };
  }
  handleIdPwInput = e => {
    if (e.target.type === 'text') {
      this.setState({ id: e.target.value }, this.validation);
    } else if (e.target.type === 'password') {
      this.setState({ password: e.target.value }, this.validation);
    }
  };
  validation = () => {
    const { id, password } = this.state;
    const condition = id.includes('@') && password.length >= 5;
    this.setState({ buttonColor: condition });
  };

• 로그인 버튼(수정 전)

 <button className={buttonColor
                    ? 'loginButtonActive'
                    : 'loginButtonDeactive'
                }
                type="submit"
                onClick={this.goToMain}
                disabled={!condtionOfButtonActivated}>로그인</button>

처음 생각했을 때에는, button의 색깔이 id 및 pw 조건에 따라 변경되는 되는 로직을 구현하였다. 때문에 buttonColor을 state값으로 두었으며 validation 함수를 실행시켜 setState에 따라 buttonColor의 값을 변경하는 식으로 진행했다. 하지만 결론적으로는 조건에 따라서 버튼 색이 변하기 때문에 내가 구현했던 validation이라는 함수를 굳이 만들 필요 없어지며 로직은 다음처럼 줄일 수 있었다.

• React 로직(수정 후)

class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      id: '',
      password: '',
    };
  }
  handleIdPwInput = e => {
    if (e.target.type === 'text') {
      this.setState({ id: e.target.value });
    } else if (e.target.type === 'password') {
      this.setState({ password: e.target.value });
    }
  };

• 로그인 버튼(수정 후)

 <button className={condtionOfButtonActivated
                    ? 'loginButtonActive'
                    : 'loginButtonDeactive'
                }
                type="submit"
                onClick={this.goToMain}
                disabled={!condtionOfButtonActivated}>로그인</button>

2. 로그인 버튼 비활성화 해제

• React 로직(수정 전)

const condtionOfButtonActivated = id.includes('@') && password.length >= 5;

• 로그인 버튼(수정 전)

 <button className={condtionOfButtonActivated
                    ? 'loginButtonActive'
                    : 'loginButtonDeactive'
                }
                type="submit"
                onClick={this.goToMain}
				disabled={condtionOfButtonActivated ? false : true}>로그인</button>

condtionOfButtonActivated 변수의 값 자체가 boolean값이므로, 굳이 삼항 연산자가 아닌, !를 사용하여 충분히 구현할 수 있는 방법이었다. (위처럼 boolean값에 삼항 연산자를 또 달아버리게 되면, 가독성과 더불어 코드가 길어져 해석(?)을 해야 하는 느낌이 강하므로..) 해당 로직을 수정하게 되면 다음과 같다.

• 로그인 버튼(수정 후)

 <button className={condtionOfButtonActivated
                    ? 'loginButtonActive'
                    : 'loginButtonDeactive'
                }
                type="submit"
                onClick={this.goToMain}
				disabled={!condtionOfButtonActivated}>로그인</button>

3. 콜백함수 인자 네이밍

• React 로직 (수정 전)

 componentDidMount() {
    fetch('http://localhost:3000/data/jeonyongmin/commentData.json', {
      method: 'GET',
    })
      .then(result => result.json())
      .then(data => {
        this.setState({
          commentList: data[this.props.number - 1],
        });
      });

위는 JSON파일에서 fetch API 를 통해 commentData를 불러오는 로직이다. 여기서 전달하는 인자의 네이밍은 자유이지만, 정확히 어떤 데이터를 처리할 것인지에 대해 알고 있어야 하기 때문에 data같은 범용적인 단어가 아닌, 구체적인 단어로 지정해줄 필요가 있다.

• React 로직 (수정 후)

 componentDidMount() {
    fetch('http://localhost:3000/data/jeonyongmin/commentData.json', {
      method: 'GET',
    })
      .then(result => result.json())
      .then(commentData => {
        this.setState({
          commentList: commentData[this.props.number - 1],
        });
      });

4. 구조분해 할당(비구조화 할당)

const object = {"a" : 1, "b" : 2};
const { a, b} = object
console.log(a) // 1
console.log(b) // 2

 const { inputValue, buttonColor, commentList } = this.state;
 const { profileImg, name, feedImg, like, comment } = this.props;

구조분해 할당이란, 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 표현식이다. 즉 객체의 경우 key과 동일한 변수를 선언한 후, 그에 해당하는 value값을 할당한다. 이는 객체 형태로 전달되는this.props, this.state 에게 모두 적용되기 때문에, 객체라는 전제 하에 비구조화 할당을 자유 자재로 사용하면 좋다.