React22 React native 상단바 겹침 paddingTop: Platform.OS === `ios` ? 0 : Expo.Constants.statusBarHeight, 제일 상단 뷰에 스타일로 적용하여 해결 {Platform.OS === 'ios' && } - 수정 - expo 프로젝트를 새로 만들었을 때, 기본 제공되는걸로 보아 최적인 듯하다. - 스타일이 아니라 컴포넌트로 사용 2020. 2. 4. [REACT] react-router-dom / react router 설치 yarn add react-router-dom 사용 BrowserRouter라는 컴포넌트 HTML5의 API를 이용하여 페이지를 새로고침 하지 않고도 주소를 변경 현재 주소에 관련된 정보를 props로 쉽게 조회하거나 사용할 수 있도록 해준다. 실습 1. index.js를 다음과 같이 수정한다. import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; ReactDOM.render( , docume.. 2020. 1. 9. [REACT] SPA / Single Page Application SPA란? 싱글 페이지 어플리케이션. 페이지가 하나다. 처음 HTML 페이지를 하나 불러온 다음, 이후 페이지들은 JS로 로드한다. 기존 웹페이지 로딩방식의 단점 트래픽이 너무 많이 나올 수 있다. (=비교적 안나온다.) 사용자가 몰려 서버에 높은 부하가 나올 수 있다. (=서버에 높은 부하가 나오지 않는다.) 화면전환이 일어날 때마다 HTML을 계속 서버에 요청하면 사용자의 상태를 유지하기 힘들다. (=리액트는 사용자의 상태를 유지하기 쉽다.) 바뀌지 않는 부분까지 새로 불러와서 보여줘야해서 불필요한 로딩이 있어 비효율적이다. (=리액트는 바뀌는 부분만 새로 불러와서 효율적이다.) SPA 장점 뷰 렌더링을 사용자의 브라우저가 담당한다. 사용자와의 인터랙션이 발생하면 필요한 부분만 자바스크립트를 사용하여.. 2020. 1. 7. [REACT] immer immer 란? 객체의 구조가 엄청나게 깊어지면 불변성을 유지하면서 업데이트 하기 힘들다. 이럴때 immer를 사용한다. 구조가 복잡한 객체도 매우 쉽고 짧은 코드를 사용하여 불변성을 유지하면서 업데이트 할 수 있다. immer 설치 yarn add immer immer 사용 immer를 사용하여 컴포넌트 상태를 작성할 때는 객체 안에 있는 값을 직접 수정하거나, 배열에 직접적인 변화를 일으키는 push, splice 등의 함수를 사용해도 무방하다. 따라서 불변성 유지에 익숙하지 않아도 쉽게 변화시킬 수 있다. immer를 사용한다고 해서 무조건 코드가 간결해지지는 않는다. onRemove의 경우 배열 내장 함수 filter가 더 깔끔하다. 따라서 불변성을 유지하는 코드가 복잡할 때 만 사용하자. 2020. 1. 7. [REACT] 컴포넌트 성능 최적화 많은 데이터 렌더링하기 check list 2500개 세팅 크롬 개발자 도구를 통한 성능 모니터링 F12로 개발자 도구로 들어가서 Performance탭에 들어간다. 왼쪽 위 Record 버튼을 누르고 기록을 시작한다. 리스트 중 하나를 체크하여 리렌더링 시킨다. 1300ms 정도 걸린다. 느려지는 원인 분석 자신이 전달받은 props가 변경될 때 자신의 state가 바뀔 때 부모 컴포넌트가 리렌더링될 때 forceUpdate 함수가 실행될 때 check list 1을 체크하면 App 컴포넌트의 state가 변경되면서 App 컴포넌트가 리렌더링된다. 부모 컴포넌트가 리렌더링 되었으니 그 안의 2500개의 컴포넌트가 리렌더링된다. 느리다. 그래서 최적화를 해줘야 한다. React.memo를 사용하여 컴포넌.. 2020. 1. 6. [REACT] 컴포넌트 스타일링 일반 CSS 컴포넌트를 스타일링하는 가장 기본적인 방법 import // App.js import './App.css'; BEM naming 이름을 지을때 해당 클래스가 어디에 사용되는지 명확하게 작성하는 방식 EX) .card-title-primary Sass 전처리기 Sass Less Stylus PostCSS 이 중 Sass, Less가 가장 많이 쓰이는 듯 하다. Less 사용자로서 Less의 문법이 더 쉽다. SCSS와 SASS의 차이는 중괄호, 세미콜론의 유무 차이다. 사용 node-sass 설치 utils 함수 분리하기 sass-loader 커스터마이징 node_modules에서 라이브러리 불러오기 @import '~' 를 사용하면 '../../' 없이 편하게 불러올 수 있다. // yarn.. 2019. 12. 21. [REACT] HOOKS REACT HOOKS useState 함수형 컴포넌트에서 상태 관리하기 위해 사용 import React, { useState } from 'react'; const Info = () => { const [name,setName] = useState(); const [nickname,setNickname] = useState(); const onChangeName = e => { setName(e.target.value); } const onChangeNickname = e => { setNickname(e.target.value); } return ( 이름:{name} 닉네임:{nickname} ); } export default Info; useEffect 컴포넌트가 렌더링 될 때마다 특정 작업을 실.. 2019. 12. 18. [React] 라이프사이클 * 김민준님의 '리액트를 다루는 기술'을 공부하며 개인적으로 정리한 내용입니다. 접두사 Will : 어떤 작업을 작동하기 전에 실행 Did : 어떤 작업을 작동한 후에 실행 라이프 사이클 마운트 : DOM이 생성되고 웹 브라우저상에 나타나는 것 업데이트 언마운트 : 마운트의 반대과정, DOM에서 제거 마운트 컴포넌트 만들기 constructor : 컴포넌트를 새로 만들때마다 호출되는 클래스 생성자 메서드 getDerivedStateFromProps : props에 있는 값을 state에 넣을 때 render : UI를 렌더링 componentDidMount : 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드 업데이트 props가 바뀔때 state가 바뀔때 부모 컴포넌트가 리렌더링 될 때 this.f.. 2019. 12. 16. [REACT] state * 김민준님의 '리액트를 다루는 기술'을 공부하며 개인적으로 정리한 내용입니다. state - 컴포넌트 내부에서 바뀔 수 있다. props - 부모 컴포넌트에서만 바꿀 수 있다. - 컴포넌트는 props를 읽기전용으로만 사용할 수 있다. 두 종류의 state가 있다. - 클래스형 컴포넌트의 state - 함수형 컴포넌트의 state (useState 함수) import React, { Component } from 'react'; class Counter extends Component { constructor(props){ super(props); this.state = { number: 0 } } render() { const {number} = this.state; return ( {number} .. 2019. 12. 10. 이전 1 2 3 다음
