JavaScript29 [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. [JavaScript] Generator iterable 객체 및 yield 에 대해 이해하신 뒤 아래 내용을 읽어보시기 바랍니다. yield: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/yield* Generator function generator function은 function* 로 정의한다. function 뒤에 별(*)을 붙여 generator라는 것을 지칭하며, 이 함수는 Generator 객체를 반환한다. funtion* name([param[, param[, ...param]]]) { /** ... */ }generator function을 통해 할당받은 변수를 출력해 보면 Generator 타입임을 확인할 수 있다. > function* g.. 2019. 1. 16. [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. JavaScript 표준 Medium 에서 보면 깔끔하게 보실 수 있습니다. --- JavaScript 표준에서 언급되는 CommonJS, AMD, ECMAScript, TypeScript에 대한 비교 페이지입니다. CommonJS와 AMD에 대해서는 NAVER D2의 JavaScript 표준을 위한 움직임: CommonJS와 AMD에서 자세히 설명하고 있어서 링크로 대신하도록 하겠습니다. (2012년도 글로 현재와 조금 차이가 나는 개념이 있을 수도 있습니다.)NAVER D2 글을 간략히 요약하면 아래와 같습니다.CommonJSJavaScript를 브라우저에서뿐만 아니라, 서버사이드 애플리케이션이나 데스크톱 애플리케이션에서도 사용하려고 조직한 자발적 워킹 그룹모듈화는 아래와 같이 세 부분으로 이루어진다.스코프(Scope): 모.. 2018. 9. 13. [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. form validate onsubmit html 에서 form 을 사용할 때 "저장" 버튼에 해당하는 부분의 코드를 type="submit" 을 사용해야 한다.Save물론 type 을 submit 이 아닌 “button” 으로 구현해도 된다. 하지만 submit type이 아닐 경우에 input filed 들에서 키보드 “enter” 를 눌렀을 경우 submit 핸들러가 응답을 하지 않는다.validationform 에서 validation 을 확인 후 submit 을 제한하고 싶은 경우 "onsubmit" 이벤트를 이용하면 된다. cancel save 위 예제에서 저장버튼을 클릭하면 /user API 가 호출되고 사용자가 새로 등록될 것이다.하지만 firstname 과 lastname 필드의 유효성을 체크하기 위해서는 위 코드만으로는 부족하.. 2018. 7. 25. 이전 1 2 3 4 다음
