22.07 week 4 - 구조분해할당, 프롭스의 활용, 컴포넌트 관리, useState 최소화, mouse over / enter차이

 

1. 프롭스의 활용

단순히 컴포넌트에 state를 넘겨주거나, 함수를 넘겨줄 때 위주로 사용했는데 다양하고 영리하게 사용이 가능했다. 

 

컴포넌트 자체에 데이터를 넘겨줄 때 도 데이터를 넘겨줄 수 있다.

1) <Login data={isLogin ? LOGIN_DATA : SIGNIN_DATA} / >

2) data.map((list) => return (<Signup data={list} />));

 

 

 

2. mapping시 key 속성은 제일 바깥의 요소에 부여한다.

Array.map(el => {
  return (
    <li key={el.id}>
      <span>{el.content}</span>
    </li>
  )
})

 

 

3. input 구조분해 할당 예시

// Before
if (event.target.value.includes("@") && event.target.value.length >= 5) {
  setIsIdValid(true);
} else {
  setIsIdValid(false);
}
// After
const { value } = event.target;
const isIdInputValid = value.includes("@") && value.length >= 5;

setIsIdValid(isIdInputValid);

event.target —>> value로 하면 값이 들어오는데, target까지만 입력하면 관련 정보들이 들어온다.

name, class ,value 등등

이벤트 타겟안에 있는 name과 value를 사용하려 할 때,

구조분해 할당! const {name, value}  = event.target;

 

=> event.target 안에 있는 name과 value를 가져와라 분해해서 할당해주어라. 라는 의미

 

 

+객체 구조분해 예시

// ES5 

const car = {

 type: 'Toyota',

 color: 'Silver',

 model: 2007

};

 

const type = car.type;

const color = car.color;

const model = car.model;

 

console.log(type, color, model); // Toyota Silver 2007

 

// ES6

const {type, color, model} = car;

console.log(type, color, model); // // Toyota Silver 2007

 

 

4. useState를 최소화 시키는게 좋다. 

렌더링 이슈. 동작이 계속 감지되기 때문에. 

 

 

5. 계속쓰이지 않는 컴포넌트는 작업 폴더 안에 component 폴더를 따로 만들어서

그 폴더에서 개인적으로 쓸 컴포넌트를 관리하는게 좋다. 

 

 

6. 

MouseOver/Out : 지정된 태그 요소(혹은 자신)는 물론이며, 자식 요소가 있다면 해당 자식요소의 영역까지 포함됨

MouseEnter/Leave : 지정된 태그 요소(혹은 자신)의 영역에만 해당되며, 만약 자식요소가 있다면 해당 자식요소의 영역은 제외됨