React12 [ReactJS] 재사용할 수 있는 컴포넌트 제작 이 페이지는 재사용할 수 있는 컴포넌트 제작에 대해 설명하며 리액트 & 리액트 네이티브 통합 교과서를 기반으로 작성했습니다. 일체형 컴포넌트의 어려움 특정 기능에 대해 하나의 컴포넌트만 구현한다면 작업이 간소화된다. 최소한 유지해야 할 컴포넌트가 많지 않고 모든 것이 컴포넌트의 내부에 있기 때문에 데이터의 통신 경로가 많지 않을 것이다. 그러나 이 개념은 팀 개발의 협업을 어렵게 하고 컴포넌트가 커질 수록 추후 리팩토링하는 것이 더 어려워진다. (나의 경우는 퍼블리셔가 있는 회사에서 HTML을 주면 일체형 컴포넌트를 만들게 되는 점이 있었다...이제 이걸 잘 나누자) JSX 마크업 구현하고자 하는 일체형 컴포넌트를 작성하자. 너무 길어서 깃헙 주소로 대체 - https://github.com/PacktP.. 2019. 9. 17. [ReactJS] 이벤트 핸들링 - 리액트 방식 이 페이지는 책(리액트 & 리액트 네이티브 통합 교과서)과 리액트 공식 사이트(ko.reactjs.org)를 참고하여 정리한 페이지입니다. 이벤트 처리 React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 매유 유사합니다. 몇 가지 문법적인 차이는 다음과 같습니다. React의 이벤트는 소문자 대신 캐멀 케이스(camelCase)를 사용합니다. JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달합니다. 예를 들어, HTML은 다음과 같습니다. Activate Lasers React에서는 약간 다릅니다. Activate Lasers 또 다른 차이점으로, React에서는 false를 반환해도 기본 동작을 방지할 수 없습니다. 반드시 preventDefault를.. 2019. 9. 17. [React + TypeScript] TypeScript 적용하기 이 페이지는 React에 TypeScript를 적용하는 방법에 대해 설명하고 있습니다. React에서 PropTypes로 충분히 타입 체킹이 가능하지만 state, function parameters 등의 타입 체킹은 할 수 없다. 그래서 TypeScript를 적용해보고자 합니다. 해당 프로젝트는 React 관련 기본 세팅이 되어있다고 가정하고 설명합니다. CRA를 사용할 경우 옵션을 통해 쉽게 세팅할 수 있다. create-react-app typescript-react-tutorial --scripts-version=react-scripts-ts 설치 npm i typescript ts-loader @types/react -D React에서 사용되는 TypeScript Loader에는 두가지가 유명하.. 2019. 8. 6. [React] 더보기 기능과 성능 개선 해당 페이지는 Component', 'PureComponent, Functional Component에 대해서 rerender 관련해서 정리하고 있습니다. React에서 더보기 기능을 구현할 때 기존에 보여지고 있던 리스트는 다시 렌더링을 하면 안됩니다. 각 컴포넌트로 구현했을 시에 render 수가 어떻게 되는지 예제를 통해 이해해봅시다. 예제 import React, { Component } from 'react'; import Item from './components/Item'; let index = 0; class App extends Component { state = { items: [] } componentDidMount() { this.addLi.. 2019. 4. 9. [React] Where to Initialize State in React React에서 state를 초기화하는 방식엔 여러가지가 있다. state 초기화의 2가지 방법 constructor 에서 선언 class 안에 바로 속성으로 선언 Constructor 안에서 선언 constructor 안에서 선언하는 방식은 아래와 같다. class App extends React.Component { constructor(props) { super(props); this.state = { loggedIn: false } } render() { } } class가 만들어질 때, constructor는 가장 처음으로 호출된다. 그래서 초기화하는 곳으로 적절하다. class instance 는 이미 메머리에 만들어졌기 때문에, this 를 사용할 수 있다. state 를 초기화할 때, euq.. 2019. 1. 7. [React] Stateless Component React에서 component 내부에서 state를 사용하지 않는 component. 즉, 리렌더링이 다시는 일어나지 않는 component 같은 경우 함수형 컴포넌트(Functional Component, Stateless Component)를 이용하여 구현하면 아주 쉽다. 구현방법 import React from 'react'; const Hello = () => ( hello ); export default Hello; 기본적인 구현방법은 위와 같다. 변수에 함수를 선언해주면 되며, 함수 내부에서는 화면에 보여질 JSX를 작성해 주면 된다. props 사용하기 함수형 컴포넌트에서도 부모에게서 전달받은 props를 사용할 수 있다. import React from 'react'; const Hell.. 2018. 11. 30. [ReactJS] React private route 로그인 권한 React 에서 로그인 권한에 따른 페이지 경로 접근 권한을 주는 방법 https://reacttraining.com/react-router/web/example/auth-workflow 원본: https://tylermcginnis.com/react-router-protected-routes-authentication/ 2018. 10. 16. [ReactJS] styled-components react 에서 CSS 를 사용하는 방법에는 몇가지가 있다.inline - style 속성 사용 (참고: https://reactjs.org/docs/dom-elements.html#style)CSS classes are generally better for performance than inline styles. (CSS class 를 사용하는 것이 일반적으로 inline styles 를 사용하는 것보다 성능이 좋다.) ?var divStyle = { color: 'white', backgroudImage: 'url(' + imgUrl + ')', WebkitTranstion: 'all', // note the capital 'W' here msTransition: 'all' // 'ms' is the.. 2018. 9. 3. 이전 1 2 다음
