Frontend/React

14.

섕걍 2021. 1. 1. 13:12

관심사의 분리

복잡한코드를 비슷한기능을 하는 코드끼리 모아서 별도로 관리하는것을 말함

UI를 처리하는 코드 서버API호출하는 코드 DB를 관리하는 코드등을 같은파일에서 관리하면 복잡

-> 이들은 관심사가 다르다고 보고 파일을 분리해서 관리한다.

 

하나의 컴포넌트에서 모든 기능을 구현할 수 없기 때문에 여러개의 컴포넌트를 만들어 조립한다.

 

부모의 상태를 별도의 상태값으로 관리하는 것은 좋지않음.

상태값은 일부 컴포넌트로 한정해서 관리하는 것이 좋음.

컴포넌트가 비지니스 로직이나 상태값을 갖고있으면 재사용하기 힘듦.

 

 

javaScript 

map, filter-> 공통점 : 기존 배열은 건드리지 않으면서 요소들을 순회한 후 새로운 배열을 리턴한다.

map 함수 -> 콜백함수가 적용된 새 요소들을 반환한다.

filter함수 -> 조건문을 만족한 요소들을 반환한다.

 

컴포넌트 코드 분리하는 기준이 필요함

비즈니스 로직과 상태값의 유무로 컴포넌트분리를 하는것을 추천한다.

재사용이 좋은 컴포넌트와 그렇지 않은 컴포넌트를 구분하는것

재사용성이 좋은 컴포넌트의 조건

1. 비즈니스 로직이 없다.

2. 상태값이 없다. 단, 마우스 오버 (mouse over)와 같은 UI효과를 위한 상태값은 제외한다.

이런 컴포넌트는 UI만 담당하는 컴포넌트라고 볼 수 있다.

 

 

 

'Frontend > React' 카테고리의 다른 글

16. 렌더링 속도를 올리기 위한 최적화 방법.  (0) 2021.01.01
15. useEffect 활용법1,2  (0) 2021.01.01
13.리액트 내장 훅  (0) 2021.01.01
12.엘리먼트, 컴포넌트,인스턴스  (0) 2020.12.30
11. ref속성  (0) 2020.12.28