[TIL]프로젝트 기간 코멘트 반영 리팩토링 코드 꿀팁!

1차 프로젝트가 끝나고서 할일이 이렇게 많을 줄일야..미리미리 할걸..
(하고 늘 다짐(만😭)해 본다)
프로젝트 하면서 내 원시적인 코드를 코멘트와 따로 불려가면서 배운 연욱님의 결실들을 풀어보고자 한다.

Jsx 문법 활용하기

//이렇게 백틱과 달러($)표시와 {...}활용하면 text와 변수를 활요할 수 있다
<nav className={`navbar ${isNavTransper ? 'transper' : ''}`}>

map()안에 구조분해 및 조건부 요소 내려주기

{INPUT_INFO.map(
  //map을 사용할 때 미리 구조분해를 해서 내려주면 더욱 편리하다!
            ({ title, type, name, value, placeholder }, index) => {
              return (
                <div key={index} className="signupInputWrapper">
                  <span className="signupHeader">{title}</span>
                  <br />
                  <input
                    type={type}
                    name={name}
                    className="signupInput"
                    value={`${this.state[value]}`}
                    placeholder={placeholder}
                    onChange={this.handleInput}
                    autoComplete="off"
	 //하나의 요소에만 내려주고싶으면 조건을 걸어주면 된다!
                    onKeyPress={
                      index === INPUT_INFO.length - 1
                        ? this.handleKeyPress
                        : undefined
                    }
                  />
                </div>
              );
            }
          )}

data로 받은 text의 줄바꿈이 필요하다면

//미리 줄바꿈을 해야하는 곳에 '\n'을 적어놓고 map매서드를 활용
{description.split('\n').map((line, index) => (
                    <p key={index} className="slideText">
                      {line}
                      <br />
                    </p>
                  ))}

React Icon을 토글 시키려면

//()만 삽입해 보자
{slideCardNumber === button.id ? (
                    <BiRadioCircleMarked />
                  ) : (
                    <BiRadioCircle />
                  )}

제한된 요소를 계속 반복시키려면(수정님 코드)

// 요소를 나눠서 넣으면 알아서 반복된다
backgroundColor={
                  BACKGROUNDCOLOR_LIST[index % BACKGROUNDCOLOR_LIST.length]
                }