안 쓰던 블로그

리액트에서 컴포넌트는 class 문법을 사용해서 아래처럼 정의한다 import React, {Component} from 'react'; class App extends Component { render(){ return( Hello{this.props.name} ); } } export default App; 하지만 컴포넌트가 단지 props를 전달받아 뷰를 렌더링하는 간단한 역할만 한다면 이렇게 class 만들고 render 만들 필요 없이 더 간단하게 할 수 있다 import React, {Component} from 'react'; function funcName(props) { return( Hello{this.props.name} ); } export default funcName; 이렇게 함..

모든 리액트 컴포넌트에 존재하는 라이프 사이클 페이지에 렌더링되기 전 준비 과정에서 시작하여 페이지가 사라질 때 끝난다 마운트, 업데이트, 언마운트 총 세 가지 카테고리가 존재한다 마운트 DOM이 생성되고 웹 브라우저상에 나타나는 것: 마운트 마운트할 때 호출하는 메소드에는 네 가지가 있다 메소드 종류 constructor 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드 초기 state를 정할 수 있다 constructor(props){ super(props); } getDerivedStateFromProps porps에 있는 값을 state에 동기화하는 메서드 리액트 v16.3부터 새로 생겼다 컴포넌트를 마운트하거나 props를 변경할 때 호출한다 static getDerivedStateFr..

HTML을 보면 반복되는 코드를 작성할 때가 있다 1번 2번 3번 이런 건 어떻게 효율적으로 바꿀 수 있을까? map()함수를 써봅시다 map() 맵은 파라미터로 전달된 함수로 배열 내 각 요소를 프로세싱하고 새로운 배열을 생성한다 문법 arr.map(callback, [thisArg]) callback: 새로운 배열의 요소를 생성한다 -currentValue: 현재 처리하고 있는 요소 -index: 현재 처리하고 있는 요소의 index값 -array: 현재 처리하고 있는 원본 배열 thisArg: callback함수 내부에서 사용할 this레퍼런스로 생략 가능하다 예제 배열 [1,2,3,4,5]의 각 요소를 제곱해서 새로운 배열을 만드는 예시 var numbers=[1,2,3,4,5]; var proc..

일반 HTML에서 DOM 요소에 이름을 달 때 id를 사용한다 React App 기본 생성 프로젝트의 index.js에도 id가 root인 요소에 리액트 컴포넌트를 렌더링하라는 코드가 있음 ReactDOM.render( , document.getElementById('root') ); HTML에서 id를 쓴다면 리액트에서는 ref를 쓴다 (리액트에서도 id를 쓸 수는 있지만 중복 id 등의 문제가 있어서 권장하지 않는다) ref는 DOM을 꼭 직접적으로 건드려야 할 때 사용한다 그냥 state사용 hello-react/src디렉터리 안에 ValidationSample.css 와 ValidationSamplejs 생성 .success{ background-color: lightgreen; } .failur..

이벤트: 유저가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것 예) 버튼에 마우스 커서를 올렸을 때 onmouseover이벤트를 실행하거나, 클릭하면 onclick이벤트를 실행하는 이벤트 리액트의 이벤트는 HTML의 이벤트와 비슷하다 HTML에서 이벤트는 이렇게 구현한다 HTML 실행: https://jsbin.com/ click me 리액트 이벤트 시스템 저번에 했던 버튼 코드 { this.setState({ number: this.state.number+1 }) } }>더하기 비슷한 구조를 가지고 있다 주의 사항만 몇 가지 지키면 된다 이벤트 사용 시 주의 사항 1. 이벤트 이름은 came|Case로 작성 예를 들어 HTML의 onclick은 리액트에서는 onClick으로 작성해야 한다 2. 이벤..

리액트를 사용하여 애플리케이션 인터페이스를 설계할 때, 사용자가 볼 수 있는 요소를 여러 가지 컴포넌트로 분리한다 각 기능을 맡은 컴포넌트를 만들고 파일을 따로따로 저장하여 모든 뷰를 다른 파일로 분리하는 식이다 이렇게 컴포넌트를 쓴다면 단순한 템플릿 이상의 효율을 갖을 수 있다 예를 들어 데이터가 주어졌을 때 이에 맞추어 UI를 만들어주거나, LifeCycle API를 이용하여 컴포넌트가 화면에서 나타나고 사라질 때 주어진 작업을 처리할 수 있고, 메서드를 만들어 특별한 기능 붙이기도 가능하다 컴포넌트 생성 생성하기 vscode에서 scr디렉토리 마우스 오른쪽 클릭-새 파일-MyComponent.js 입력 그리고 코드 작성 import React, { Component } from 'react'; cl..

Typo in static class property declaration react/no-typos 에러 static propTypes={ name: PropTypes.string, age: PropTypes.number.isRequired } static propTypes name: PropTypes 대소문자를 확인한다