🐱 기술 : React, scss, jsx

🐱 기간 : 2021/09/13 ~ 2021/10/01

🐱 바닐라 JS로 클론했던 나의 캣스타그램을 리액트로 옮기는 과정에서 기술적으로 막히거나 혼자 많이 고민하고, 또한 인상 깊었던 코드들을 기억하고 싶어서 포스팅으로 정리하고자 한다.

---

Login.js

1. 계산된 속성명을 이용한 inputHandler 메서드 합치기

handleIdInput 와 handlePwInput 메서드는, 아이디 <input>과 패스워드 <input>에 입력한 텍스트를 각각 해당하는 state에 저장하는 메서드이다.

// 기존 코드
  handleIdInput = e => {
    this.setState({
      idValue: e.target.value,
    });
  };

  handlePwInput = e => {
    this.setState({
      pwValue: e.target.value,
    });
  };

<input id="idInput" placeholder="전화번호, 사용자 이름 또는 이메일"
  	onChange={this.handleIdInput} />

<input type="password" id="pwInput" placeholder="비밀번호"
  	onChange={this.handlePwInput} />

이벤트 객체 e의 출처가 각각의 <input>마다 다르고, 저장해야 할 state가 다를 뿐. 메서드의 형태는 비슷하다. 이를 하나의 메서드로 합칠 방법은 없는지에 대한 고민을 길게 했었다.

사실 이때는 리액트를 다룬 지 얼마 안 되었을 때라, 아래와 같은 미숙한 방법으로 중복되는 메서드를 합치려고 했었다. (시간이 실제로 오래 지체되기도 했었다.)

// 시도했던 코드
  handleInput = e => {
    this.setState({
      IdValue: e.target.value,
      pwValue: e.target.value,
    });
  };

<input id="idInput" placeholder="전화번호, 사용자 이름 또는 이메일"
  	onChange={this.handleInput} />

<input type="password" id="pwInput" placeholder="비밀번호"
  	onChange={this.handleInput} />

• 위와 같은 방법으로 하면, 이벤트 객체의 출처인 <input>은 다른데, 하나의 메서드를 호출하게 된다. 쉽게 설명하자면 아이디 <input>에 입력했던 입력값이 IdValue에도, pwValue에도 저장이 된다는 점을 깨달았다.
• event.target은 이벤트가 발생한 요소만을 반환하거나, 속성을 가리킬 수도 있기 때문이다.
• 이에 대한 해결 방법으로는, <input> 태그 안에 name 속성을 이용하여 input handler를 합치는 방법이 있겠다.

// 리팩토링 후의 코드
  construct() {
    super();
    this.state= {
      email: '',
      password: '',
    }
  }

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

<input id="idInput" name="email" placeholder="전화번호, 사용자 이름 또는 이메일"
  	onChange={this.handleInput} />

<input type="password" id="password" name="pwName" placeholder="비밀번호"
  	onChange={this.handleInput} />

1. state명은 각 <input>의 name과 똑같이 설정. (계산된 속성명!)
2. handleInput 메서드에 <input>의 name 속성을 이용하여 각각 다른 <input>마다 state 값을 저장시켜 줄 수 있다.

2. <a> 링크 대신 <Link>

// 기존 코드 - 이동할 경로가 없어 경로 미지정
 <a href="#" className="pwForgot">
	비밀번호를 잊으셨나요?
 </a>

• <a> 는 새로고침 하는 것처럼 html 페이지 문서 자체를 다시 받아오게 되며, 똑같은 부분을 불러오더라도 다시 파싱해야 되기 때문에 성능면으로도 좋지가 않고, 자원적으로 낭비가 된다.
• 하지만 리액트는 SPA이다. 하나의 페이지 안에서 이동해야 할 다른 페이지(=컴포넌트)를 불러오는 형식이다.
• <Link>는 똑같은 부분을 다시 파싱하지 않고, 새로 불러올 컴포넌트만 호출해 주므로 렌더링 최적화를 할 수 있겠다.

// 리팩토링 후의 코드
// Link import문 설정
import { Link } from 'react-router-dom';

// 이동할 경로가 없어 경로 미지정
 <Link to="#" className="pwForgot">
	비밀번호를 잊으셨나요?
 </Link>

3. className의 동적 사용

• style에 사용자 이벤트로 인해 변화를 줄 때, inline으로 바로 줄 수 있지만 이는 지양하는 것이 좋다.

  💡 왜 지양하는 것이 좋을까?
  우선 style 속성이 길어진다면 가독성이 좋지 않게 된다. 또한 html 태그 안에 인라인 style로 지정하는 것은 css 파일 적용보다 우선순위가 높아지기 때문에, 파싱 부분에서 문제가 될 수 있겠다.

// 리팩토링 후의 코드
constructor() {
    super();
    this.state = {
      email: '',
      password: '',
      buttonColor: false,
    };
  }

  buttonColorChange = () => {
    const { idValue, pwValue } = this.state;
    const isButtonActive = email.includes('@') && password.length >= 5;
    this.setState({ buttonColor: isButtonActive });
  };

<button className={buttonColor ? 'loginOn' : 'loginOff'}> 로그인 </button>

• scss 파일과 함께, className 동적 사용을 활용해 보도록 하자.
• loginOn : 활성화된 진한 배경 색상 / loginOff : 비활성화된 연한 배경 색상

예시 1 ) 로그인 버튼 색상 활성화

예시 2 ) 메인 상단바 프로필 클릭시 팝업 On/Off

예시 3 ) 좋아요 하트 클릭

---

scss

4. reset.scss & common.scss

• reset.scss & common.scss는 공통으로 쓰이는 scss 파일이므로, 공통 페이지인 index.js에서 한 번만 import하는 것이 좋다.
• 초기화 하는 세팅은 reset.scss에, 모두가 같이 쓸 수 있는 css는 common.scss에 넣자.

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

5. Sass nesting

• nesting 을 적용해야 하는 이유는, 리액트가 SPA인 것과 관련이 있다.
• 결국에는 하나로 합쳐지는 파일들이라, 내가 작성한 코드가 의도치 않게 다른 파일에 있는 요소에 영향을 줄 수 있기 때문이다.
• 클래스명에 따라 UI 구조가 뭉개지지 않게 하기 위해서는 css에서 sass로 변환하는 과정에서 nesting을 꼭 하도록 하자.

---

main.js

6. import 순서

import { Component } from 'react';
import CenterBar from './components/topUserSearch/CenterBar';
import MainFeed from './components/mainFeed/MainFeed';
import SideBar from './components/sideBar/SideBar';
import './Main.scss';

1. 라이브러리 : 리액트 관련 패키지, 외부 라이브러리
2. 컴포넌트 : 가까운 컴포넌트 to 먼 컴포넌트
3. 함수, 변수 및 설정 파일
4. 사진 등 미디어 파일 (.png)
5. css 파일 (.scss)

7. JSON 파일의 Mock Data 호출

1. 거짓된, 가짜의, 샘플 데이터.
2. 백엔드 API를 모방한 데이터.

• 백엔드에서 API를 호출해야 하는 상황일 때, 백엔드 API가 완성이 되지 않았을 수 있다.
• 백엔드가 API를 완성할 때까지 기다리는 것이 아닌, 프론트엔드에서 가짜의 데이터인 Mock Data를 만들어 데이터가 들어올 상황을 미리 대비해야 한다. 즉, 데이터에 맞게 UI가 의도한 대로 구현되는지 먼저 확인해야 한다.
• 또한 Mock Data를 만드는 과정에서 백엔드 API에서 보내주는 response가 어떤 형태인지, key-Value값을 미리 확인하고 맞춰 볼 수 있다.
• 추후 실제 백엔드 API를 수월하게 연결할 수 있다.

  constructor() {
    super();
    this.state = {
      profileLayer: false,
      feedInfo: [],
    };
  }

  componentDidMount() {
    fetch('http://localhost:3000/miyeon/data/mainFeed.json', { method: 'GET' })
      .then(res => res.json())
      .then(data =>
        this.setState({
          feedInfo: data,
        })
      );
  }

1. componentDidMount() : 컴포넌트가 mount 되는 시점에 생성되는 라이프사이클 메서드이다. 이 시점에 데이터를 불러오도록 한다.
2. json 파일은 public 폴더 > data 폴더 안에 위치해야 한다. public 폴더는 실제 배포 후 접근할 수 있는 폴더이므로, Mock Data에 접근하려면 역시 public 폴더 안에 json 파일로 작성해야 한다.
3. javascript에서 http 요청을 보낼 때는 fetch 함수를 사용한다. 첫 번째 인자로는 http 요청을 보낼 API 주소, 두 번째 인자로는 요청을 보낼 때의 옵션을 넣는다.
4. .then(res => res.json()) : res는 http 통신 요청/응답 중 응답의 정보를 담고 있는 response object이다. 응답으로 받는 JSON 데이터를 사용하기 위해서는 json() 메서드를 호출하고 return 해야 한다.
5. .then(data => this.setState({ feedInfo: data, })); : json 파일에서 가져온 데이터들은 배열의 형태이므로, 배열 state인 feedInfo에 덮어씌운다.

json 파일로 불러온 객체들은, main.js에 state 배열로 저장이 되었다.
💡 데이터의 변경을 원할 때 json 파일 내부에 있는 객체들은 수정이 불가하지만, main.js의 state에서 수정 및 관리가 가능하다.

8. .map() 메서드로 반복되는 컴포넌트 뿌리기

캣스타그램의 하나씩의 피드를 담는 <article>를 컴포넌트화 해주었다.
mainFeed.json에 보여주고 싶은 피드의 정보를 몇 개씩 담아 주었고, 이를 state 값으로 받았으니 반복되는 여러 개의 피드 컴포넌트를 .map() 메서드로 뿌려 보았다.

<div>
{this.state.feedInfo.map(user => {
   return (
    <MainFeed userData={user}
              key={user.no} />
           ); 
 })}
</div>

• fetch 함수로 받은 Mock data는 배열 state인 feedInfo에 저장했다.
• 이 배열을 .map() 메서드로 피드 컴포넌트 하나씩 뿌려 줄 것이다.
• user 요소를 props인 userData로 전달했다.
• key는 무조건 자식 컴포넌트가 아닌, 뿌려줄 컴포넌트를 명시하는 부분에서 선언하자. key를 인덱스로 지정하는 것도 지양해야 한다.
  💡 나중에 데이터가 삭제된다면 인덱스 값에 변경이 있을 수도 있기 때문이다.

9. 피드 댓글 업로드

• 댓글 목록은 comment.js로 컴포넌트화 해주었고, 업로드 될 댓글 한 줄은 uploadComment.js로 컴포넌트화 해주었다.

constructor() {
    super();
    this.state = {
      inputVal: '',  	// Input에 입력되는 텍스트를 받을 용도
      commentList: [],  // 업로드 될 댓글을 받을 배열
    };
  }

// 댓글 업로드 메서드
addMyComment = e => {
    e.preventDefault();
    const { commentList, inputValue } = this.state;
    const newArr = [
      ...commentList,
      {
        id: commentList.length + 1,
        name: 'buzzi_nyang',
        content: inputValue,
      }, // 댓글 하나 업로드 시 추가될 댓글의 정보를 객체로 받는다.
    ];
    this.setState({
      commentList: newArr,
      inputValue: '', // input창 텍스트 초기화
    });
  };

1. e.preventDefault(); : 해당 메서드가 실행되고 나면 페이지가 다시 렌더링되므로, 리렌더링을 막아주고자 썼다.

2. ...commentList : commentList에 담겨있던 요소들을 복제해온다.

   💡 Three dot 표기법 : 배열에서 쓰일시, 배열1의 요소들을 배열2에 하나씩 분포되어 고르게 추가하고 싶을때 ...배열1 과 같이 쓰인다. 점 세개로 생략하는 것 같다. Array.concat() 메서드와 쓰임이 비슷하다.

3. 댓글 하나 업로드 시 추가될 댓글의 정보를 객체로 받고, 새로운 배열 newArr를 선언하여 newArr에 이들을 담는다.

   • id: commentList.length + 1 -> commentList 배열의 총 길이에다 1을 더해야 현재 댓글이 몇 번째 요소에 있는지 카운트 된다.
   • name: 'buzzi_nyang' -> 로그인한 사람이 계정주인이므로.. 일단 계정주 계정 박제.
   • content: e.target.value -> input에 입력하는 댓글을 content에 저장한다.

4. 3번에서 저장했던 댓글의 정보 배열 newArr를 기존 배열 commentList 에 덮어씌운다.

   덮어 씌우는 방법 말고, 현재 업로드될 댓글 객체 하나만을 기존 배열에 추가하는 방법은 없는지. 기존 배열에 댓글 객체 하나를 추가해도 댓글 데이터들이 손상될 방법은 없는지에 대한 고민을 하였다. 해당 댓글 객체를 []로 묶어 배열화 하여, commentList.push([해당댓글객체]) 로 하면 되지 않을까?

5. 특히 input창에 입력된 텍스트를 초기화하는 부분에서 애를 많이 먹었다. 댓글을 업로드한 뒤에, 댓글 입력창 <input>에 올렸던 댓글 문자열이 다 초기화되어야 하는데, 아래 코드로는 초기화가 되지 않고 문자열이 그대로 남아 있었던 것이다.

// 기존 코드
 this.setState({
      commentList: newArr,
      inputValue: '', // input창 텍스트 초기화
    });

• console.log(inputValue)를 찍어 보면 빈 문자열이 나오긴 하는데, <input>의 문자열은 초기화가 되지 않길래 아래와 같이 수정을 했었다.

// 수정한 코드
 this.setState({
      commentList: newArr,
      inputValue: '', // input창 텍스트 초기화
    });

  let length = document.getElementsByClassName('.wrapper').length;
  e.target[length].value = '';

• DOM 이벤트 태그로 전체 피드 <article> 의 개수를 계산해서, 현재 이벤트가 발생되고 있는 요소의 value 값을 빈값으로 설정했더니 <input>의 문자열이 초기화되었었다.
• 피드백 받은 문제점은 DOM 이벤트 태그 자체는 리액트에서 지양해 주는 것이 좋으며, 대신 Ref 라는 것을 쓸 수 있다고 한다.

  💡 Ref? : 리액트에서 state로만 해결할 수 없고, DOM을 반드시 직접 건드려야 할 때 사용한다. HTML을 작성할 때 태그에 id를 붙이는 것처럼, 리액트에서도 DOM에 이름을 다는 방법이다.

• 또한 나중에 .wrapper 클래스명을 가진 요소가 추가가 된다면 UI가 망가질 수 있어, 이 방법은 적절하지 않다는 피드백을 받았다. 따라서 수정한 코드는 아래와 같다.

// 리팩토링 후 코드
 this.setState({
      commentList: newArr,
      inputValue: '', // input창 텍스트 초기화
    });

  handleInput = e => {
    this.setState({
      inputValue: e.target.value,
    });
  };

<input className="comment"
       placeholder="댓글 달기..."
       value={inputValue}
       onChange={this.handleInput} />

• <input>에 value 속성을 부여하고, 입력받는 state인 this.state.inputValue를 그대로 써주었다. 그러면 <input>의 value는 입력하는 대로 써질 테고, state인 inputValue에도 그대로 저장이 될 테고, 댓글이 업로드 된다면 <input>의 문자열도 초기화 될 것이다.

10. 특정 댓글 삭제 기능

.filter() 메서드를 처음 써 보았다. 적응하는 데까지 이틀은 걸렸던 것 같다.

// 댓글 삭제 버튼 이미지
<img src="./images/miyeon/trash.png"
     onClick={() => this.props.deleteComment(comment.id)}
     alt="deleteComment" />

1. 삭제 버튼 이미지에 onClick 이벤트를 주었고, 몇 번째 댓글 id인지 알려주는 해당 id 요소까지 부모 컴포넌트에 있는 함수에 전달하였다.

// 댓글 삭제 메서드
  uploadDeleteComment = id => {
    const deleteMyComment = this.state.commentList.filter(
      comment => comment.id !== id
    );
    this.setState({
      commentList: deleteMyComment,
    });
  };

2. 업로드 된 댓글 배열인 commentList에 filter 메서드를 썼다.
3. 댓글 요소 하나의 id가, 클릭한 해당 요소의 id가 같지 않으면 조건식이 성립한다. 만약 id가 서로 같다면 false로, 배열에서 빠지게 되어 댓글 삭제처럼 보이는 것이다.

   선택하지 않은 댓글 요소는 true로, 이들만 새로운 배열이 만들어진다. 선택한 댓글 요소는 삭제할 댓글 요소이니까, 해당 조건식이 성립이 되지 않아 false로 되며, 기존 배열에서 빠지게 되는 것이다.

11. 상단바 유저 검색 기능

.filter() 메서드는 사실 아직까지도 낯설다.

<div className={this.state.searchLayer ? 'searchOn' : 'searchOff'}>
          <ul className="searchUsersul">
            {this.state.users
              .filter(people => {
                if (this.state.searchKeyword === '') {
                  return people;
                } else if (
                  people.id.toLowerCase().includes(this.state.searchKeyword.toLowerCase())
                ) {
                  return people;
                }
              })
              .map(userArr => {
                return <NavUserSearch usersInfo={userArr} key={userArr.no} />;
              })}
          </ul>
        </div>

1. 검색창은 검색 <input> 을 클릭할 때마다 클래스명 변경으로 On/Off 를 할 수 있게 했다.
2. 유저 목록이 들어있는 배열 users에 대해 .filter 메서드를 썼다.
3. if (this.state.searchKeyword === '') return peopleArr;
   • 검색 <input>에 아무것도 입력하지 않았을 때, 모든 유저 목록을 보여 주고 싶어서 해당 조건문을 설정했다. 그런데 굳이 써 주지 않아도 문제 없이 작동했다.
4. 만약 유저 목록 중 한 유저의(people) id를 소문자화한 것에, 입력받은 글자를 소문자화한 것이 포함된다면 해당 유저(people)를 return 한다.
5. 조건이 성립한 유저들로 구성된 배열이 새로 만들어진다. 이 배열을 .map() 메서드로 돌린다.
6. 보여줄 유저 UI 태그들은 <NavUserSearch />로 컴포넌트화 해주었다.
7. 이때 5번에서 만들어진 유저 배열들을 props로 usersInfo={userArr} 전달해 준다.

---

📚 마치면서

• 바닐라 자바스크립트로 단순 클론만 할 때는 자바스크립트로 기능 구현하는 것은 등한시한 채로, 미적인 면에만 집착했었다. 무조건 인스타그램 원본과 똑같이 따라 하려고, 미적으로 깔끔하고 예뻐 보이는 것에 우선순위를 뒀었다. 단순 클론을 끝내고 나서 반성을 많이 했다.

  덜 예쁘게 만들더라도, 기능 구현 및 리팩토링 퀄리티에 우선 순위를 두는 것을 목표로 했다. 👏

• 리액트로 옮기는 과정에서, 리액트의 문법에 익숙해지고자 필수 구현이 아닌 기능까지 모두 리액트의 문법에 맞게 고치려고 노력했다.

• 마침 추석 연휴가 끼어 있던 덕분에 많은 기능을 구현할 수 있는 시간을 벌게 되어 어느 정도 리액트에 익숙해진 것 같다.

  특히 state와 props를 어떻게 관리해야 할지 감을 잡을 수 있었다. 단방향으로 흐르기에, 부모 컴포넌트에서 state와 props를 관리해 주는 게 좋다는 것도 명확하게 알았다.

• 구현한 기능이 많을수록 리팩토링할 것이 많아지고, state와 props의 관계도 복잡해져서 헷갈리기 시작했다. 다음 프로젝트 할 때는 전체적인 구조와 컴포넌트의 관계를 생각해 가면서, 헷갈림이 덜하게끔 노력해야겠다.

• 내가 짠 코드가 리액트에 어울리는지 고민을 정말 많이 하게 된 계기가 되었다.

  원래도 스스로한테 엄격한 편이지만, 이번 리액트 클론을 통해 검열을 많이 할 수 있었던 기회가 되었다. 어떤 코드가, 어떤 방법이 더 리액트를 다루는 데에 효율적이고 합리적인지에 대해 고민하고 리팩토링 하는 데에 시간을 정말 많이 쏟았다. 👏