Programing/React
-
-
[React] Debugging TipPrograming/React 2024. 3. 14. 10:00
애뮬레이터에서 어플리케이션 동작 및 기능을 검증하는 과정에서 자주 경고 문구나 에러 메세지를 마주하게 된다. 디버깅 기능을 통해 콜스택을 확인할 수 있고 문제가 되는 코드가 내가 작성한 라인이면 바로 수정이 가능하겠지만 때로는 콜스택이 리액트 라이브러리 내부에서 발생하는 경우에는 디버깅이 어려워 질수 있다. 다행히 리액트에서는 아래 화면과 같이 예외 경우가 발생할 경우 동작을 일시 정지하여 문제되는 코드를 바로 확인할 수 있다. 이는 'Pause on uncaught exceptions' 과 'Pause on caught exception'을 활성화 시킨 후 확인할 수 있다.
-
[React Native] Enable/Disable debugging mode in android emulatorPrograming/React 2024. 2. 14. 12:33
안드로이드 에뮬레이터에서 개발을 하다보면 특정 컴포넌트 동작이 느린 경우가 발생한다. 내 경우엔 react-native-modal 을 import 해 실행해보니 화면에 보여지기까지 대략 2~3초의 시간이 걸리는 문제가 발생하였다. Debugging Mode로 실행하는 경우 뷰 전환시 딜레이가 발생하는 경우가 있으니 아래와 같이 디버깅 모드를 해제후 다시 시간을 확인해 보길 권장한다. 디버깅 모드를 해제하려면 윈도우: Ctrl+m, 맥: CMD+m 으로 설정변경이 가능하다.
-
[React Native] Lifecycle of Class ComponentPrograming/React 2024. 2. 13. 13:06
getDerivedStateFromProps(props, state) : 상태 또는 파라미터 변경 후 기존에 생성되었던 컴포넌트 오브젝트의 render() 를 호출시 해당 변경된 값들을 반경시킬때 사용할 수 있다. static getDerivedStateFromProps(props, state) { if (state.key != props.route.params.key) { return new_state; // { key: new_value, ... } } else { return null; } } Prop object: State: Class component 의 state object (e.g., this.state = {key: value})
-
[troubleshooting] Icon was not shown when using react-native-vector-iconsPrograming/React 2023. 10. 31. 16:33
React native 에서 제공하는 아이콘을 사용하기 위해 react-native-vector-icons 패키지 설치후 관련 설정을 반!드!시! 추가로 해줘야만 한다. 그렇지 않고 패키지 만을 설치하고 아이콘을 호출하면 네모 모양의 이상한 아이콘만 계속 표시될 수 있다. 안드로이드 앱을 개발하는 경우 번들에서 앱이 참조할 수 있도록 추가로 설정을 해줘야만 한다. apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle") https://github.com/oblador/react-native-vector-icons GitHub - oblador/react-native-vector-icons: Customizable Icons..
-
[React] 컴포넌트의 생명 주기Programing/React 2023. 7. 31. 12:21
리액트 컴포넌트의 생명주기(Life Cycle)는 컴포넌트가 생성되고, 업데이트되거나, 제거될 때 특정한 이벤트들을 호출하는 것을 의미한다. 리액트 컴포넌트는 다음과 같은 생명주기를 가지고 있다: constructor(): 컴포넌트가 처음 생성될 때 호출. getDerivedStateFromProps(): 컴포넌트가 처음 생성되거나 props가 변경될 때 호출된다. 이 메서드에서 state를 업데이트할 수 있다. render(): 컴포넌트가 렌더링될 때 호출된다. 이 메서드에서 컴포넌트의 HTML을 생성한다. componentDidMount(): 컴포넌트가 DOM에 마운트된 후 호출된다. 이 메서드에서 컴포넌트가 DOM과 상호작용하기 위한 작업을 수행할 수 있다. componentDidUpdate(): ..