JavaScript/React20 [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. React 로 TDD 쵸큼 맛보기 https://www.slideshare.net/jeokrang/react-tdd-76066004?from_action=save 2018. 7. 20. [ReactJS] scroll to top 특정 컴포넌트의 스크롤을 위로 올리기 위한 방법이다. componentDidUpdate() { let scroll = this.refs.scrollElement || document.getElementById('scrollElement'); scroll.scrollTop = 0; } render() { return ( ... ... ... ) } 스크롤을 변경하고자 하는 부분에 id를 추가하고 componentDidUpdate 함수에 스크롤 변경 코드를 추가하면 된다. 2017. 7. 31. [React] 속도 향상 Component vs. PureComponent vs. Functional ComponentReact에서 컴포넌트를 만드는 방법에는 크게 클래스 기반(React.Component, React.PureComponent)과 함수 기반(Functional Stateless Component)로 나뉜다. 클래스 기반 컴포넌트React.Component와 React.PureComponent는 shouldComponentUpdate 라이프 사이클 메소드를 다루는 방식을 제외하곤 동일하다.PureComponent ≈ Component + shouldComponentUpdate shouldComponentUpdateshouldComponentUpdate(nextProps, nestState)React.Componen.. 2017. 7. 25. [ReactJS] add component in list 동적으로 리스트 안의 값을 추가하여 보여줘야 하는 경우가 있다. ReactJS 에서는 render() 안의 값을 동적으로 보여주기 위해서는 state 를 이용해야 한다. import React from 'react';import TmpComponent from './TmpComponent'); export default class TestClass extends React.Component { constructor(props) { super(props); this.state = {resultAjax: [],tmpState: [],checked: [] } } componentDidMount() { // Ajax 호출 ...for (..) {checked[i] = false;this.setState({res.. 2016. 12. 29. 이전 1 2 3 다음
