React14 React에서 Styled Component 사용법 Styled-Components 사용법 특징 자바스크립트 파일 안에 CSS를 작성하는 형태 (emotion과 대체 가능) .css파일을 따로 만들지 않아도 된다. props나 자기 자신 특정 가능. 환경 설정 $ yarn add styled-components 예제 코드 import React from 'react'; **import styled, { css } from 'styled-components';** const Box = styled.div` /* props 로 넣어준 값을 직접 전달해줄 수 있습니다. */ background: **${props => props.color || 'blue'};** padding: 1rem; display: flex; `; const Button = styled.. 2022. 4. 22. React 상태관리 Mobx 정리 및 사용법 Mobx 개념 정리 및 사용법 1-1. MobX의 주요 개념 1) Observable State (관찰 받고 있는 상태) 상태의 변경이 잇으면 Mobx에서 관찰하고 있다가 어떤 부분이 바뀌었는지 파악한다. 2) Computed Value (연산된 값) 기존의 상태값과 다른 연산된 값에 기반하여 만들어질 수 있는 값으로 성능 최적화를 위해 사용된다. 어떤 값을 연산할때, 연산에 기반되는 값이 바뀔때만 새로 연산하고, 바뀌지 않았다면 기존의 값을 사용한다. (vue에서 computed와 비슷한거같음..) 3) Reactions (반응) 값이 바뀜에 따라 해야 할 일을 정한다. 즉, observable state의 내부 값이 바뀌면 따로 설정해둔 할 일을 실행한다. 4) Actions (액션; 행동) 상태에 .. 2022. 4. 22. React 프로젝트 Ionic Capacitor 사용하여 Android, Ios Build하기 Android, Ios App 배포를 위한 Capacitor 사용법 및 빌드 적용 방법에 대해서 정리한 글입니다. 제가 담당하고 있는 프로젝트는 추후 앱으로도 출시하기 위해 처음부터 Ionic 환경으로 시작한 웹뷰 형식의 웹사이트입니다. 이 글에서는 신규 프로젝트를 Ionic으로 생성하는 방법 보다는 기존에 Ionic으로 작업했던 React 프로젝트를 Android, Ios로 Build하는 작업에 집중하겠습니다. Ionic이란? Ionic - 웹앱을 네이티브앱으로 래핑하는 개발 방식을 사용합니다. Ionic UI Frameworks : 모바일 UI + 웹UI 쉽게 도와주는 UI 컴포넌트들을 제공 Ionic Native : Capcaitor 나 Cordova 플러그인을 활용해 쉽게 디바이스 제어 기능 제공.. 2022. 4. 22. React | button에서 onClick 이벤트 핸들링 프로젝트에서 button을 클릭했을때 해당 url 주소로 넘어가기 위해 onClick 이벤트 핸들링을 했어야 했다. 처음에 사용했던 방식으로는 그냥 버튼을 클릭했을때 this.handleClick으로 해결하려 했으나 여러개의 버튼이 별개의 url로 이동하기 위해 state로 변경하였다. state, 즉 상태값을 따로 지정 해야 했는데 react에 익숙하지 않아 고생했다.. 먼저 constructor에 state 정보를 저장한다. constructor(props) { super(props); this.state = { Data: [ { id: 1, company: "Apple Store", url: "url주소", src: "./img/apple__logo.png", }, { id: 2, company: .. 2020. 8. 11. 이전 1 2 3 4 다음
