Im Bay

React Hooks React Hooks란 함수형 컴포넌트에서 다양한 기능을 사용할 수 있게 만들어준 라이브러리 반복문, 조건문, 중첩된 함수 내에서 Hook 호출 불가 (리액트 함수 내에서만 호출) React의 상태 및 life-cycle 관리 상태 관리 Hooks useState useContext (createContext) useReducer 시점 Hooks useLayoutEffect (render 후) useEffect (pain 후) 메모화 Hooks useMemo useCallback memo 그 외 Hooks useRef, useImperativeHandle useDebugValue, useId Hooks의 3 원칙 컴포넌트 영역 안에서만 작동 함수 컴포넌트, 커스텀 훅 내부에서만 호출..

React Component Component 속성(Props)을 받고 상태(state)/메소드를 가진다. 반복되는 UI 단위 가능한 순수함수로 실행되도록 작성하고 데이터 영역과 UI를 분리 MyComponent.defaultProps = {…} Class Component extends React.Component 또는 createClass constuctor, this.state, render(), … LifeCycle 관리가 쉽다 Functional Component react 16.8부터 사용, 직관적이고 가볍다. render 필요 없고 JSX return; React Component Props Props props, children (React.Node) 속성(변수, 함수 등) 전달 MyCom..

React Concept virtual-dom from Fibers Tree & Scheduler Alogirithm renderer 랜더링 담당 reconciler DOM의 변경 관리 (비동기) ReactDOM render the REactElements createElement(tag, attr, …children); render(reactElement, reactRoot); React.Component render / ReactDOM / life-cycle 컴포넌트 생성 const Sample = React.createClass({…}); class Sample extends React.Component {…} const Sample = props ⇒ (…); React Concept HTMLEle..

로그 기록 console.log(); 터미널에서 결과 확인 가능

컴포넌트 View View는 다른 컴포넌트를 담고 배치하는 컴포넌트 View안에는 텍스트를 넣을 수 없다. Text 컴포넌트로 감싼 텍스트를 넣어야 한다. Text style={const객체.스타일이름} margin: 간격 넓이 borderWidth: 테두리 두께 borderColor: 테두리 색상 padding: 여백 넓이 TextInput 사용자가 텍스트를 입력할 수 있게 해주는 컴포넌트 Button Button 사용시 import에 Button 적어주기 예제 import { StyleSheet, Text, View, Button } from 'react-native'; export default function App() { return ( Another piece of Text! Hello Wor..

React Native iOS Android View, Text View라는 JSX 코드만 컴파일된다. TextInput 컴포넌트 사용 어플 실행 방법 Android Studio에서 Emulator 실행 VS code 터미널에서 npm start (프로세스 실행) 이후 a 입력 (android 실행) Android Studio 시뮬레이터 실행 완료 코드 수정 시 VS code 수정 후 저장만 하면 자동 실행