[TIL] 23_0122 이름 짓기, 비구조화 할당(객체 구조분해, 배열 구조분해)

 

이름 짓기

이번에 베이직 수업에서 변수, 클래스 이름 등의 이름 짓기에 대해 알려주셨어. 분명 직관적으로 잘 짓는다고 자부하고 있었는데 정말 작은 부분에서 못 짓고 있었다는 걸 알게 됐어. 그리고 바로 프로젝트에서도 수정했지. 물론 내가 보기엔 간단할 지라도 같이 협업하는 사람에겐 무슨 의미인 지 모르고, 그걸 사용하는 사람마다 일일이 알려줄 수 없으니 누가봐도 알아볼 수 있는 이름으로 지어야 해. 평소 삭제 버튼의  클래스 이름을 del-btn이라고 짓고 있었는데 이게 잘못 됐다는 걸 알았어. delete-btn라고 이런 식으로 길어지더라도 내가 함께 협업하는 사람도 직관적으로 알아볼 수 있도록 지어야 해.

 

예를 들어, del-btn 외에도 ed-btn 등 regi-btn 이런 것도 edit-btn이나 registor-btn 등으로 풀어서 쓰는 게 좋아.

 

객체 구조분해

객체에서 값들을 추출해서 새로운 상수로 선언해 주는 거야.

간단한 예시로,

const object = { name : 냥애취, age : 3}

const { name , age } = object

console.log(name) // 냥애취
console.log(age) // 3

 

 

리액트에선 이렇게 매개변수 안에서 props 전달을 이렇게 구조분해 할당으로 할 수 있어.

export const TodoForm = ({ todoInputs, setTodoInputs }) => {
  const add = "추가";
  const init = {
    id: 1,
    title: "",
    comment: "",
    isDone: true,
  };
  const refTitle = useRef(null);
  const [todoInput, setTodoInput] = useState(init);
  ~이하 내용들~
  const onSubmitHand = (e) => {
    
    ~내용~

    setTodoInputs([...todoInputs, { ...todoInput, id: idNum }]);
    setTodoInput(init);
    refTitle.current.focus();
  };
  }

 

배열 구조분해

배열 구조분해도 똑같아.

const arr = [ 1, 2, 3]

const [ a, b, c] = arr

console.log(a) // 1
console.log(b) // 2
console.log(c) // 3

 

대신 배열은 위치가 중요해. 고유의 index값이 있어서. 

 

 

 

 

느낀 점

- 나름 같이 일하는 동료를 생각하며 누가 봐도 직관적으로 이 값과 함수가 어떻게 쓰이는 지 변수와 클래스 이름을 잘 짓고 있었다고 생각했는데, 당연하게 느꼈던 부분에서 배려를 못 하고 있었어.

- 구조 분해 할당은 값을 꺼낼 때 정말 편한 것 같아..요즘 구조 분해로 값 꺼내서 깔끔하게 값 쓸 수 있는 것에 빠져서 자주 쓰게 되는 것 같아ㅋㅋ..필요한 것만 딱 꺼내 쓸 수 있으니 그 점도 정말 좋아.