UI기반 컴포넌트

UI를 기준으로 컴포넌트를 나누니 변경사항이 발생했을때 너무 편하고 오류가 발생하더라도 더 잘찾을수 있는 것 같다. 뭐가 좋은지는 알겠지만 아직 자유자재로 UI기반 컴포넌트로 코드를 짤수는 없지만 연습하다보면 점점 나아질거다.

구조분해할당

const adrian = {
    fullName: 'Adrian Oprea',
    occupation: 'Software developer',
    age: 31,
    website: 'https://oprea.rocks'
};
const bill = {
    ...adrian,
    fullName: 'Bill Gates',
    website: 'https://microsoft.com'
};

위 코드에서 ...이라는 spread operator가 사용되었는데 저게 너무 궁금해서 콘솔창에 출력해봤는데 오류가 뜬다. 그래서 이유를 찾아보다가 몰랐던 구조분해할당에 대해 알게되었다. 지금까지 내가 알던 spread operator와 구조분해할당은 이정도였다.

const array [1,2,3,4];
console.log(...array);

function counting(one,two,three,four){
  console.log(one);
  console.log(two);
  console.log(three);
  console.log(four);
counting(...array);
  
const [name,age] = {name : 'leo', age : 26};
  console.log(name);
const [location,weather] = [seoul,good];
  console.log(location);
  console.log(weather);

const bill = {
   ...adrian,
   fullName: 'Bill Gates',
   website: 'https://microsoft.com'
};

다시 위에 코드를 보면 ...adrian이라는 뜻은 adrian의 모든 프로퍼티를 불러오고 그뒤에 나오는 fullName : 'Bill Gates'라는 것은 그중에서 fullName 프로퍼티값만 변경하겠다는 뜻이였다. 마찬가지로 website도 동일하다.

느낀점

그동안 처음 접했을때 익숙하지않아서 이걸 쓸 필요가 있나 싶었는데 점점 쓰다보니 나도모르게 편해져서 쓰는 경우가 많다. 예를들어 처음에는 for...of나 for...in 같은것들도 일반적인 for문이 있는데 헷갈리게 왜쓰는거지 했는데 지금은 대부분의 경우를 for..of와 for..in으로 쓰고있고 함수형 프로그래밍을 하면서 화살표함수도 많이 익숙해져서 지금은 일반 함수 선언보다 편하게 쓰고 있다.