리팩토링: 캡슐화

리팩토링을 하자니 어떻게 해야할지 잘 모르겠다.ㅠ0ㅠ
리팩토링에 대해 구글링을 해보고 내가 신경쓰이는 쪽이 캡슐화, 상속, 추상화 즉 객체지향이라 우선 객체지향 개념 중 캡슐화에 대해 좀더 공부해보려고 한다.

보안을 위해 캡슐화를 한다. 라고 배웠었는데, {} 이렇게 블럭 안에 변수나 함수 등 어떤 요소를 선언했을때 블럭 외부에서 접근하지 못하는 것을 이용해 보안을 강화한다고 이해했다.

자바스크립트 리팩토링
1. 정의된 레코드를 직접 참조하는 코드가 많을 때 캡슐화를 해준다.

• 클래스를 사용
• 클래스란? 유사한 성격을 가진 객체(인스턴스)의 모임

2. 임시 변수를 함수로 만들어버리는 게 좋다.

• 명확한 정의

리팩토링 책에 대한 요약본이 다수인 것 같다... 근데 이해가 안가!!

자바스크립트는 객체지향 언어가 아닌데, 객체지향 프로그래밍을 하기 위해 몇가지 도구를 사용한다. 클래스, 프로토타입

클래스 문법

class User {
  constructor (name) {
    this.name = name;
  }
  sayName() { //function 키워드가 없다.
    console.log(this.name);
  }
}
var me = new User("seolgi");
me.sayName(); //"seolgi"

프로토타입 문법

function User(name) {
    this.name = name;
}
User.prototype.sayName = function() {
  console.log(this.name);
}
var me = new User("seolgi");
me.sayName(); //"seolgi"

클래스는 es6 이후부터 가능하게 된 방식이다.
그런데 여기서 의문이 생긴다.
리액트를 공부하면서, 클래스는 옛날방식이라고 들었는뎅? 함수형을 쓰라고 들었다궁
기본은 중요하지만 리팩토링하는데 시대를 역행할수는 없자넝?

자바스크립트 + 캡슐화 가아니라 리액트 + 캡슐화 로 검색어를 달리 해봤다.
컴포넌트 : 리액트에서 기능을 단위별로 캡슐화하는 단위
볼수록... 오리무중에 빠졌다. 처음으로 돌아가는 느낌?

카카오 기술블로그
스토리북을 사용하면서 리팩토링 효과를 얻었다! 는 내용인데 스토리북을 사용할 생각은 아니지만 참고할만 해보여서..
https://fe-developers.kakaoent.com/2022/220609-storybookwise-component-refactoring/

1. 아토믹 디자인 시스템을 참고해 컴포넌트 분리, 배치
   과하게 작은 범위로 분리하지 않는다!
2. 데이터를 불필요하게 불러오는 경우
   https://www.patterns.dev/posts/presentational-container-pattern/
   로직을 처리하는 컴포넌트(컨테이너)와 보기를 처리하는 컴포넌트(프리젠테이션)를 분리한다.

• Presentation
  수신한 데이터를 수정하지 않고 스타일을 포함해 원하는 방식으로 표현. 렌더링만 한다.
• Container
  데이터를 포함하는 프레젠테이션 구성 요소에 데이터를 전달.
  일반적으로 스타일도 포함하지 않는다.
• Hook
  훅을 이용해 위 패턴을 구현할 수 있다.
  프레젠테이션에서 훅을 사용하기만 하면 됨.

3. 부모나 전역 환경에 항상 존재할 것이라고 가정하고 참조