[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]
}
Author And Source
이 문제에 관하여([TIL]프로젝트 기간 코멘트 반영 리팩토링 코드 꿀팁!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@choice/TIL프로젝트-기간-코멘트-반영-리팩토링-코드-꿀팁저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)