[study] 240122

작은 단위 컴포넌트부터 만들기

Atomic design pattern

 : 작은단위부터 큰 단위까지 컴포넌트를 조합해 만들어가는 것 (Lego 조립과 비슷)

---

React-natived에서 자주 사용하는 hook

-useWindowDimensions // 디바이스별로 화면 크기를 조절할 수 있다.

export const ComponentA = (props) => {

   const {window, height}=useWindowDimensions();

   {…etc code}

}

 

-useBackHandler

npm install @react-native-community/hooks

 

-useAppState

npm install @react-native-community/hooks

 

-useNavigation, useRoute.   // navigation - 페이지 간 이동, route - 이동할 때 데이터를 들고 갈 수 있다

export const ComponentA = (props) => {

    const navigation = useNavigation();

    const routes = useRoute();

    …

}

-useIsFocused, useFocusEffect

export const ComponentA = (props)=>{

    const isFocused = useIsFocused();     //boolean 값 반환

    useFocusEffect(useCallback(()=>{

    //focus가 되었을 때의 처리

}, [userId]));

…

}

 

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

export const ComponentA = (props)=>{

    const scrollViewRef=useRef();

    useScrollToTop(scrollViewRef);

…

}

 

#react-use 

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

 

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

Export const ComponentA = (props)=>{

Const [count, setCount] useState(0);

Const preCount = usePrevious(count);

…

}

---

Function component

함수의 호출 = render

const ComponentA = () => {}

 

render element

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

 

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

 

-useMemo

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

두 번째 인자 : dependency array

 

export const ComponentA = (props) =>{

    const variableA = useMemo(()=>{}, [])

)

 

-useCallback

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

두 번째 인자 : dependency array

 

export const ComponentA = (props) =>{

    const variableA = useCallback( () => {}, [])

}

 

//오래 사용하면서 메모리가 커지게 되는 경우가 많고,  앱이 일시정지 되는 경우도 있었는데, 메모리 절약에 도움이 될 수 있다.