1. 컴포넌트

1.1 재사용 가능한 컴포넌트

• 컴포넌트를 만드는 이유, 재사용성
• 컴포넌트화 하지 않고 만들다 보면 너무 많은 코드 양으로 유지보수 난이도 증가
• 너무 잦은 컴포넌트화는 예상하지 못한 변경점이 생겨 버그로 이어짐

1.2 Atomic Design Pattern

• 작은단위부터 큰 단위까지의 컴포넌트를 조합해 만들어가는것
• Lego조립하는것과 같은 개념

1.3 Dumb component vs Smart component

• Dumb component : 보여주는 일에만 집중
  • e.g. Card 컴포넌트 : 그냥 텍스트를 카드 형태로 보여주기만 함
• Smart component : 상태를 가지고 스스로 변함
  • e.g. Dropdown 컴포넌트 : open해서 마지막으로 선택한 상태값을 보여줌

1.4 언제 컴포넌트를 만들어 재사용 하는가

• 제일 작은 단위는 우선적으로 컴포넌트로 만들어 재사용
• Molcule이상의 단계들중에서 3회이상 반복되면 컴포넌트로 만듦

2. Hooks

• react 16.8 버전에서 새로 소개
• functional component에서도 state와 기타 다른 사이드 이펙트를 다루기 위해 탄생

2.1 functional component

• hook 탄생 이전에는 state를 가질 수가 없었기 때문에 주로 dumb component로만 활용
• hook의 등장으로 주목받기 시작

2.2 왜 hook을 만들었는가 ?

(1) 컴포넌트간 상태 관련 로직 재사용하기 어려움

• 매번 같은 상태 관리 로직을 Copy & Paste
• 공통화 되지 않다보니 컴포넌트 마다 변경사항을 수정해야 하는 어려움

(2) 컴포넌트가 커질수록 복잡해지는 로직

• componentDidmount에서 너무 많은 일을 하게 됨
• e.g. 컴포넌트 마운트시 api 호출 및 event listener를 subscribe
• 단일 책임 원칙(SRP)에서 벗어나게 되는 일

(3) 혼란을 주는 class

• class this 키워드에서 오는 좋지 못한 경험

2.3 hook 사용의 규칙

(1) 모든 hook을 사용할때 최상단에서 호출 하여야만 함

• class 컴포넌트의 동작
  1. component 생성 시 (Class 생성하여 instance 생성)
  2. component 최초 렌더 시 (Class 내부 render method 호출)
  3. component 업데이트 시 (Class 내부 render method 호출)
• functional 컴포넌트의 동작 (렌더링 = 함수호출)
  • component 생성 시 (function 호출)
  • component 최초 렌더 시 (function 호출)
  • component 업데이트 시 (function 호출)

(2) React 함수에서만 hook을 사용 해야 함

3. 자주 사용하는 hook

3.1 useWindowDimension

1
export const ComponentA = props => {
2
  const { window, height } = useWindowDimensions()
3
  // {...etc code}
4
}

3.2 useBackHandler

1
npm install @react-native-community/hooks

1
export const ComponentA = props => {
2
  useBackHandler(() => {
3
    return true
4
  })
5
  // {...etc code}
6
}

3.3 useAppState

1
npm install @react-native-community/hooks

1
export const ComponentA = props => {
2
  const currentAppState = useAppState() // active, background, inactive(only ios)
3
  // {...etc code}
4
}

3.4 useNavigation, useRoute

1
export const ComponentA = props => {
2
  const navigation = useNavigation()
3
  const routes = useRoute()
4
  // {...etc code}
5
}

3.5 useIsFocused, useFocusEffect

1
export const ComponentA = props => {
2
  const isFocused = useIseFocused()
3
  useFocusEffect(
4
    useCallback(() => {
5
      // focus 가 되었을때의 처리
6
    }, [userId]),
7
  )
8
  // {...etc code}
9
}

3.6 useScrollToTop

• useScrollToTop : ScrollView를 최상단으로 올릴때 사용

1
export const ComponentA = props => {
2
  const scrollViewRef = useRef()
3
  useScrollToTop(scrollViewRef)
4
  // {...etc code}
5
}

3.7 useMount

• useMount : component가 mount된 시점에 callback 호출

1
export const ComponentA = props => {
2
  useMount(() => {
3
    // on mount 처리
4
  })
5
  // {...etc code}
6
}

3.8 usePrevious

• usePrevious : state의 이전 값을 알아내고자 할때 사용

1
export const ComponentA = props => {
2
  const [count, setCount] = useState(0)
3
  const prevCount = usePrevious(count)
4
  // {...etc code}
5
}

4. 최적화 Memoization

4.1 Functional component

• 함수 호출을 하며 생긴 함수 내부의 변수, 함수등은 모두 호출 될 때마다 새로 할당하게 됨

4.2 Memoization

• 수행했던 연산 결과들을 어딘가 저장한뒤 동일한 입력값 인 경우 재활용하는것

4.3 useMemo

1
export const ComponentA = props => {
2
  const variableA = useMemo(() => {}, [])
3
}

• 첫번째 인자 : 기억할 값을 리턴해주는 함수
• 두번째 인자 : dependency array

1
export const ComponentA = props => {
2
  //props.a = 1, props.b = 1
3
  const variableA = useMemo(() => {
4
    return props.a + props.b
5
  }, [props.a, props.b])
6
}

4.4 useCallback

1
export const ComponentA = props => {
2
  const variableA = useCallback(() => {}, [])
3
}

• 첫번째 인자 : 기억할 함수를 리턴해주는 함수
• 두번째 인자 : dependency array