1. css convention

• 복잡한 Layout 구성일 수록 css propery에 맞게 convention을 잘 지켜서 작성하는게 좋다.
  일반적인 css convention 은 하기와 같은 구성이다.

  [CSS property 순서]

  • 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)

---

2. event.preventDefault()

Why use?

a 태그나 submit 태그는 누르게 되면 href 속성을 통해 이동하거나, 창이 새로고침하여 실행이 됩니다.
주로 form 태그에서 submit을 누른 후 바로 실행되는 함수의 refresh를 막고 submit 이후에 좀더 실행할 액션들을 적용하고 싶을 때 사용합니다.

---

3. React fetch 함수

• fetch(url, [options])함수의 기본 문법
  • url: 접근하고자하는 url
  • options: 선택 매개변수, method나 header를 지정할 수 있으며, method가 get이고 header에 내용이 없을 경우에는 Defalut 값인 GET으로 들어가므로 생략이 가능하다.

---

4. spread 연산자(전개 구문)

spread 연산자는 ...을 통해 사용할 수 있습니다.
spread 연산자는 연산자의 대상 배열 또는 이터러블(iterable)을 "개별" 요소로 분리합니다.
하기 코드와 같이 arr 를 spread 연산자로 전개한 것을 다시 a의 배열로 넣는 것이다.

const arr = [1, 2, 3, 4, 5];

console.log(arr); // [ 1, 2, 3, 4, 5 ]
console.log(...arr); // 1, 2, 3, 4, 5
console.log(1, 2, 3, 4, 5); // 1, 2, 3, 4, 5

spread 연산자는 array.concat()를 대체 가능합니다.

const aArr = [1, 2, 3];
const bArr = [4, 5, 6];

// array.concat
console.log(aArr.concat(bArr)); // [ 1, 2, 3, 4, 5, 6 ]

// spread
console.log([...aArr, ...bArr]); // [ 1, 2, 3, 4, 5, 6 ]

---

5. React 여러개의 input 제어하기

input 태그에서는 name 이라는 속성이 있습니다. 말 그대로 input 태그에 이름을 지워주는 것으로 이 속성을 이용하면 여러개의 input value를 제어가 가능합니다.

• 로그인 창의 email input 과 password input 값을 제어할때 하기 코드와 같이 각각의 input 태그에 onchange 각각의 함수를 부여하여 제어하였습니다.
  하지만 반복적인 코드이므로 하기와 같이 수정이 가능합니다.

handleEmail = e => {
  const { value } = e.target;
  this.setState({
    email: value,
  })
  ...
}

handlePw = e => {
  const { value } = e.target;
  this.setState({
    password: value,
  })
  ...
}

render(){
 return (
   ...
   <input
     className="emailInput"
     type="text"
     onChange={this.handleEmail}
   />
   <input
     className="pwInput"
     type="password"
     onChange={this.handlePw}
   />
   ...
 )
}

• 하기 코드와 같이 input태그에 name 속성을 지정하면 name 속성의 값은 value 처럼 e.target으로 가져올 수 있습니다.(e.target.name)
• name 속성은 input, textarea 태그에서만 사용이 가능합니다!

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}
   />
   ...
 )
}