[LWID] Westagram with react

3주차에는 리액트를 배웠고, 2주차 기간에 자바스크립트로 만들었던 westagram을 react로 다시 만들어보는 작업을 진행했다.
이번 역시 2주차 때 westagram을 만들었을 때 썼던 글처럼 리액트로 바꾸는 동안에 막혔던 부분, 그리고 프로젝트를 통해 리액트를 알수 있었던 것에 대해 정리해 보도록하겠다.

2주차에 썼던 westagram 후기

https://velog.io/@devpark_0x1c/TID-westagram-%EA%B5%AC%ED%98%84

로그인

setState의 특성으로 인해 발생한 에러

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

validLoginButton = () => {
    const { inputId, inputPassword } = this.state;
    inputId.includes('@') && inputPassword.length >= 5
      ? this.setState({ isDisabled: false })
      : this.setState({ isDisabled: true });
  };

이번 필수 과제에 있었던 @가 포함되고 password가 다섯글자 이상일때만 로그인버튼이 활성화되게 하는 것을 하려고 위와 같은 함수를 만들어서 실행했는데, 6글자일때 실행이 되는 것이다. 그래서 나는 console.log로 inputId inputPassword를 확인해봤는데, 내가 입력한것이 한박자씩 늦게 배열로 들어오는 것이다.
알고보니 setState의 특성때문에 위와 같은 현상이 발생하는것이었고, 아래의 글을 작성하며 setState의 콜백을 활용해서 문제를 해결했다.

https://velog.io/@devpark_0x1c/TIL-setState%EC%97%90-%EB%8C%80%ED%95%9C-%EC%9D%98%EB%AC%B8

메인

componentDidMount의 활용

Lifecycle에 대해서 velog에 글을 쓸때만 해도 어떻게 프로젝트에 적용하면 될까? 하는 생각을 했었다. 근데 westagram을 통해 '아~ 이렇게 사용하면 되겠구나'하는 정도는 알게 됐다.
나는 Element 자체에 데이터를 넣지 않고 json파일을 fetch하여 모든 데이터를 가져오는 것을 자바스크립트 때부터 해왔는데, 리액트 역시 그렇게 하는것이 좋을것 같아서 자바스크립트와 같이 fetch 후 데이터를 state에 저장하는 방법으로 진행을 했다.
화면이 처음 실행될 때 data를 가지고 있는 json 파일로부터 데이터를 추출하여 state의 옮기는 flow가 componentDidMount가 해주어야할 큰 임무이다.

componentDidMount() {
    this.addData();
  }

addData = () => {
  fetch('http://localhost:3000/data/userData.json')
    .then(res => res.json())
    .then(data => {
    this.setState({ userData: data });
  });
};

위 작업처럼 addData라는 함수를 만들어서 fetch를 진행하고 componentDidMount는 해당 작업을 수행한다.! componentDidMount는 단 컴포넌트가 실행될 때 단 한번만 실행하기 때문에 위처럼 데이터를 가져올 때 유용하게 사용할수 있는 Lifecycle이라고 생각한다.

component의 활용

리액트를 배우면서 신기하면서도 오? 이렇게도 구성을? 이라고 생각했던게 component였다.
HTML 템플릿을 만들어놓으면 그것을 재사용할수 있다는 신박한 개념~
코드도 깔끔해지고 내가 어떻게 구성하냐에 따라 내부를 쪼개는 방식을 다양하게 설정할수 있다는것이 초반 설계만 잘 구상한다면 불필요한 HTML 작성 시간을 줄여줄수 있다는것에 큰 장점이 있다.
이번 westagram에서는 3명의 팀원들과 함께 진행을 했는데, 해당 페이지를 같이 만드는것은 아니고 공통 컴포넌트를 하나 만들어서 공유해서 각자 사용해보는것을 목적으로 진행했다.
인스타그램 최상단에 위치한 nav를 공통으로 사용했는데, 우리 조는 팀원 선주님의 것을 사용했다.
공통 작업을 하면서 들었던 생각은 공통 작업물에 대한 내용은 처음에 구조, 클래스명, css를 팀원들끼리 잘 상의하고 만들어야 한다는 것이다. 이번 같은 경우는 기존에 각자 만들어놓은 nav에서 괜찮아보이는것을 하나 골라서 선정한거기때문에 나랑 선주님의 naming convention이 달랐고 나는 element 클래스명을 kebab-case로 했는데, 선주님은 camelCase로 작성이 되어있어서 아~ 이런것때문에 나중에 프로젝트할때는 팀원들끼리 잘 정해두고 해야하는거구나~ 하는걸 배웠다.

후기

기존 자바스크립트로 만든 westagram에서 react로 옮기는 과정은 기능적으로 추가된건 더 없고 리액트로 전환하면서 함수 선언, component 활용, Lifecycle에 대한 이해를 할수 있었고, 다른 부족한 부분들은 1차 프로젝트를 진행해야 다양한 시나리오를 접하면서 지금 배운 class component에 대한 이해를 좀 더 깊게 할수 있을것 같다.