1. console.log 지우기!
- 테스트를 할 때: 필수적
- master branch 금지 (유저 볼 수 있음)
2. 함수 이름, 변수 이름, 클래스 이름
3. css 속성 순서
레이아웃 영향 多 순서, 인접 속성끼리 묶어서 작성
속성 순서
- Layout Properties (position, float, clear, display)
- Box Model Properties (width, height, margin, padding)
- Visual Properties (color, background, border, box-shadow)
- Typography Properties (font-size, font-family, text-align, text-transform)
- Misc Properties (cursor, overflow, z-index)
4. reset.scss & common.scss
※ 주의 : 모든 팀원이 동일하게 가지고 있어야 함.
-
reset.scss, common.scss의 위치: index.js에 한번
-
common.scss에 정의된 속성이 필요한 경우
필요한 .scss 파일에서 import 해서 사용
-
-
Reset.scss : 초기화 세팅
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}- common.scss : 모두 쓸 수 있는 or 계속 쓰는 css
$themeColor: #0095f6;5. Sass nesting 활용
-
다른 파일의 요소에 영향 줄 가능성 有
→ 하나로 합쳐지는 파일들이기 때문
→ 참고) SPA, React, React Router 개념 정리
6. className의 동적 사용
- 예시
<button
onClick={this.handleCommentInputBtn}
className={this.state.commentBtn ? "activated" : "deactivated"}
>
로그인
</button> .activated {
color: #0095f6;
}
.deactivated {
color: #b5e1ff;
}7. 비구조화 할당, 구조분해 할당(destructuring)
- 객체, 배열에 적용 가능한 자바스크립트 ES6 문법
- 예시 1 (함수)
handleInput = e => {
this.setState({
value: e.target.value,
})
...
}
// 비구조화 할당 적용
handleInput = e => {
const { value } = e.target;
this.setState({
value: value,
})
...
}
// key-value 이름이 같은 경우 (cf. ES6 객체 단축 속성명)
handleInput = e => {
const { value } = e.target;
this.setState({
value,
})
...
}
const {idValue} = this.state;- 예시 2 (백틱, 축약)
const {id} = this.state;
console.log(`id: , ${id}`); // 1.
console.log({id}); // 2. - 1
- 백틱(`)과 ${}을 사용
- 2
- key와 value 일치 시 사용
- 기존 console.log({id : id});- 예시 3 (
render함수 내부)- state, props 객체에 비구조화 할당을 적용
render() {
const { email } = this.state;
const { handleInput } = this;
return (
<input
onChange={handleInput}
value={email}
/>
)
}8. Boolean 데이터 타입의 활용
// 1. 원래 코드
if (조건식) {
this.setState({
key 1 : true,
key 2 : false
})
} else {
this.setState({
key 1 : false,
key 2 : true
})
}
// 2. 1차 줄인 코드
const 변수명 = 조건식;
this.setState({
key 1 : 변수명? true : false,
key 2 : 변수명? true : false,
})
// 3. 2차 줄인 코드
const 변수명 = 조건식;
this.setState({
key 1 : 변수명,
key 2 : 변수명,
})-
- 1차 줄인 코드
- 변수에 조건식을 담는다
- 변수의 결과를 삼항 연산자로 활용
- 1차 줄인 코드
-
-
2차 줄인 코드
-
변수명으로만 축약
→ 변수명이 Boolean 타입으로 자동 T/F 산출
-
-
9. 반복되는 코드는 Array.map() 활용
- 기존 코드 예시
<li className="footer_li">
<a href="">도움말</a>
</li>
<li className="footer_li">
<a href="">홍보 센터</a>
</li>
<li className="footer_li">
<a href="">API</a>
</li>
<li className="footer_li">
<a href="">채용정보</a>
</li>Array.map()활용 코드 예시footerData.js
// named export (vs. default export) // 1.
export const INFO = [ // 2.
{id: 1, content: "도움말"}
{id: 2, content: "홍보 센터"}
{id: 3, content: "API"}
{id: 4, content: "채용정보"}
] - 1
named export 사용
- 2
변수 선언 후에 배열 내부에, 객체의 key & value를 사용하여 데이터 축약
- key & value
- id
map메소드가 반드시 사용해야 하는 key
- content
페이지에 나오는 것
Footer.js(Footer 컴포넌트)
import {INFO} from './footerData.js' // 1
render() {
return (
...
{INFO.map(el => {
return (
<li key={el.id}> // 2-1
<a href="">{el.content}</a> // 2-2
</li>
)
})} - 1
INFO를 import함. ( `footerData.js` 의 변수)
- 2
2-1. id
2-2. content
10. inputHandler 함수 합치기 - 계산된 속성명
- 기본 원리
onChangeHandler = (e) => {
this.setState({
[e.target.name] = e.target.value
})
}<input name="" />- 개념
input태그에 이름을 지어 주는 것- name 속성의 값:
e.target.name으로 가져 올 수 있음 - input 태그만 가능
- 사용 예시
- 개념
// input에 name 추가, 함수 하나로
handleInput = e => {
const { value, name } = e.target;
this.setState({
[name]: value
})
}
render(){
return (
...
<input
className="emailInput"
type="text"
name="email"
onChange={this.handleInput}
/>
<input
className="pwInput"
type="password"
name="password"
onChange={this.handleInput}
/>
...
)
}- 계산된 속성명(computed property name)
// 계산된 속성명 (ES6)
let i =0;
const a = {
["foo" + ++i]: i,
["foo" + ++i]: i,
["foo" + ++i]: i
};
// 결과
console.log(a.foo1); // 1
console.log(a.foo2); // 2
console.log(a.foo3); // 311. <a> vs <Link>
-
<Link>추천렌더링 최적화를 위해서
-
비교
-
<a>html을 새로 다 받음 (새로 고침 하는 것처럼)
-
<Link>컴포넌트만 바뀜
-
12. import 순서
- 라이브러리
- React 관련 패키지
- 외부 라이브러리
- 컴포넌트
- 가까운 컴포넌트 to 먼 컴포넌트
- 함수, 변수 및 설정 파일
- 사진 등 미디어 파일(
.png) - css 파일 (.
scss)
[Note] 조건부 렌더링 vs 삼항 연산자
-
비교
-
조건부 렌더링 (적합 : T/F 여러 개일 때 )
{앞 && 뒤}앞: True이면, 뒤:보임
-
삼항 연산자 (적합 : T/F 나뉠 때)
-
-
예시
import React, { Component } from 'react';
export class ZookProduct extends Component {
render() {
const { title, price, img, isNew, isBest } = this.props;
return (
<div className="product">
<img alt={title} src={img} />
<div>{title}</div>
<div>{price}</div>
{/* <div>{isNew ? 'NEW' : ''}</div> */} // 원래 코드
{/* <div>{isBest ? 'BEST' : ''}</div> */}
{/* 조건부 렌더링 && 보여 지거나 안 보여지거나 */}
{isNew && <div>NEW</div>} // 조건부 렌더링
{isBest && <div>BEST</div>}
<div>{isNew ? 'NEW' : 'BEST'}</div> // 삼항 연산자
</div>
);
}
}
export default ZookProduct;
복습 목적 블로그 입니다.