2023-02-09(컴포넌트 분리)

✅리액트는 컴포넌트 분리를 하는 이유?

• 개발할 때 편리한 것보다 변경할 때 편리하기 위해서의 관점으로 컴포넌트를 나누는 것이 좋다고 한다. 보통 데이터의 목적(모델)에 따라 변경이 자주 이루어지기때문에 모델이 같다면 "재사용"하고 다르다면 컴포넌트를 분리하도록 한다.

• 가독성 : 기능이 명확하게 분리되어 있으면 코드를 이해하고 유지보수하기 쉬워진다.

• 재사용성 : 코드의 재사용성을 높이기 위해서 기능별로 컴포넌트를 분리해야합니다.

⭐✅컴포넌트 분리 기준

1 기능 : 특정 기능을 담당하는 컴포넌트를 분리합니다

2 ui : 화면 구성요소별로 컴포넌트를 분리합니다

⭐⭐⭐⭐⭐✅분리하는 방법

1. 코드가 길 때 긴 코드에 구성은 하나의 컴포넌트로 이루어져있을 것이다
2. 자식 컴포넌트를 하나 만들고 props를 통해서 자식컴포넌트에게 데이터를 전달해준다.
3. 기존에 컴포넌트 분리 되기 전에 있던 빈 자리에는 <자식 컴포넌트 이름 />을 적은뒤 자식 컴포넌트에게 props해줄 필요한 값들을 변수에 각각 넣는다.
4. 자식 컴포넌트는 props를 "구조분해할당"을 통해 받는다. 객체면 객체 형태로 배열이면 배열 형태로 받는다.
5. 부모와 자식 파일을 따로 분리시켜서 독립을 시킨뒤 자식 컴포넌트에서 export default (컴포넌트 명);을 쓴 뒤 수출을 시킨다
6. 부모 컨퍼넌트에서 파일을 인식할 수 있게 import 컴포넌트명 from ~ 를 적어서 수입 받는다.

    <Working
              key={item.id}
              item={item}
              setTodo={setTodo}
              setDone={setDone}
              done={done}
              todo={todo}
            />
----------------> 자식으로 빠져나간 자리는 이렇게 처리
------>구조분해할당으로  props변수들을 나열했음

const Working = ({ item, setTodo, todo, setDone, done }) => 
{
  const todoDel = (id) => {
    
    setTodo(todo.filter((item) => item.id !== id));
  };
  const clickDoneButtonHandler = (item) => {
    const find = todo.filter((value) => value.id !== item.id);
    setTodo(find);
    setDone([
      ...done,
      {
        id: item.id,
        title: item.title,
        content: item.content,
        isDone: !item.done,
      },
    ]);
    console.log(item, find);
    alert('완료');
  };
  return (
    <div className="componentStyle">
      <div className="boxTitle">{item.title}</div>
      <h6 className="boxContent">{item.content}</h6>
      <button onClick={() => todoDel(item.id)} className="deleteButton">
        삭제하기
      </button>
      &nbsp;
      <button onClick={() => clickDoneButtonHandler(item)} className="completeButton">
        추가
      </button>
    </div>
  );
};
export default Working;

1. 코드 중복을 줄이기 위해 기능 별로 컴포넌트를 분리한다.(코드 중복 최소화)

2. 재사용 가능한 컴포넌트 만들기 : 공통적으로 사용되는 ui요소나 기능을 가진 컴포넌트를 만들어 재사용할 수 있도록 합니다

3. props 전달 : 부모 컴포넌트에서 자식 컴포넌트로props를 전달하여 각 컴포넌트의 기능을 제어한다.

4. 상태 관리 : 상태 관리를 위해 state를 가진 상위 컴포넌트에서 하위 컴포넌트로props를 전달하고ㅡ 하위 컴포넌트에서는 props를 이용하여 상태를 렌더링합니다.
   상위 컴포넌트는 props로 넘겨주고 구조 분해 할당으로 받아와야지만 쓸 수 있다.

5. Hooks 사용 : 각 컴포넌트의 상태 관리와 라이프사이클 메소드를 관리하기 위해 react hooks를 사용할 수 있다.

---

용어정리

✅*라이프 사이클이란?

새명주기 메서드라고도 함
컴포넌트가 브라우저상에 나타나고, 사라지게 될 때 호출되는 메서드들
클래스형 컴포넌트에서만 사용 가능
-->mount -->update --> unmount 순서.

⭐✅구조분해 할당이란?

객체 또는 배열에서 원하는 데이터를 추출하여 변수에 할당하는 것
리액트에서 구조분해 할당을 사용하는데 props로 전달받은 객체에서 특정 값을 추출하여 컴포넌트에서 사용하고자 할 때 구조 분해 할당을 사용할 수 있다.

구조분해할당 예시

function MyComponent(props) {
  const { title, content } = props;
  return (
    <div>
      <h1>{title}</h1>
      <p>By {author}</p>
    </div>
  );
}
++++++++++++++++++++++
let arr = [1,2,3]
[1,2] = [10,20]
console.log(1) = 10
console.log(2) = 20

-->>설명 :
props 객체에서 title,content 값을 추출하여 각각의 변수에 할당했따. --> 컴포넌트 내부에서 titler과 content를 사용할 수 있다