본문 바로가기

React.js

sort / filter를 이용한 검색 소개 주소록 검색 기능 구현 sort 기능 : 배열 요소 내의 데이터들을 오름차순 또는 내림차순으로 정렬하여 뿌려준다. 단어 배열 var fruits = ['apple','banana','cherry']; 다음과 같은 글자로 되어 있는 배열 같은 경우는 unicode로 비교하여 정렬하게 됩니다. 오름 차순 : 배열이름.sort();내림 차순 : 배열이름.sort(); fruits.sort(); 결과 : [apple,banana,cherry] fruits.reverse();결과 : [cherry,banana,apple] 숫자 배열 var numbers = [1,2,3,4,5]; 다음과 같이 숫자로 되어 있는 배열은 sort의 인자로 callback함수를 주어서 정렬해야한다. (es5) function sorti.. 더보기
react-hot-loader 소개 react-hot-loader란? webpack-dev-server를 돌릴 때 서버를 다시 돌릴 필요 없어 변경 사항을 바로 refresh 해주는 역할을 한다. Install npm install --save react-hot-loader How? import React from 'react' import ReactDOM from 'react-dom' import { AppContainer } from 'react-hot-loader' import App from './containers/App' const render = Component => { ReactDOM.render( , document.getElementById('root'), ) } render(App) // Webpack Hot Modu.. 더보기
Map() 소개 Map() 메소드 : 파라미터로 전달된 함수를 통하여 배열 내의 각 요소를 처리해서 그 결과로 새로운 배열을 만들어 내는 것. arr.map( callback , [thisArg] ); callback에 들어갈 수 있는 요소들 currentValue : 현재 처리되고 있는 요소 index : 현재 처리되고 있는 요소의 indexarray : 메소드가 불려진 배열 [thisArg] : (option) callback 함수 내부에서 사용할 this 값 설정 ** ES6 문법 ** Arrow function let a = (a,b,c) => { console.log(a+b+c);} 이런 식의 구조를 앞으로 많이 쓸 것입니다. let a = (a,b,c) 는 ES5에서는 var a = function(a,b,c.. 더보기
State 소개 State 1. 유동적인 데이터를 사용할 때 쓴다. ( cf . props 같은 경우는 정해진 데이터 ) App 클래스에 대해서 props의 value 값으로 propName 설정 , 그리고 고정 값인props.children 설정 ReactTest라는 클래스에서 App 클래스를 rendering한다.rendering 할 때 App 클래스의 propName은 ReactTest 클래스의 props의 value 값인 propName으로 설정한 것이다. 조금 꼬여서 복잡해 보일 수 있는데, 이 부분에서의 propName은 App클래스의 props 값 propName을 가리키는 것이고 그 값을 정의할 때에 App 클래스의 props의 값인 propName으로 받는다는 것이다. 즉, ReactTest 클래스를 다.. 더보기
Props 소개 props : 컴포넌트 내부에 변화하지 않는 Data에 사용된다. : JSX 내부에 { this.props.propsName } 으로 접근한다. : 컴포넌트를 사용할 때 , 괄호 안에 propsName = "value"로 작성한다. : {this.props.children} 은 기본적으로 갖는 props로 _______ 여기에 값이 들어간다. 위에 사진처럼 {this.props.name} 으로 선언을 해주면 이는 두 번째 특징에 속하며 해당 값을 가지고 오는 방법은 세 번째 방법을 이용하시면 됩니다. props의 value 값이 name이기 때문에 세 번째 방법은 아래와 같이 Haams라는 클래스에서 name (props의 value)가 "seongho" 라고 정의를 내려 주는 것입니다. {thi.. 더보기
JSX 소개 JSX Javascript에서 html 코드를 그대로 작성 xml 문법을 Native Javascript 문법으로도 해결 ReactDOM : 실제 페이지에 JSX코드를 Rendering할 때 사용 모든 JSX코드는 Component ( Container element )에 포함 시키기 React.Componenet를 상속받는 클래스를 만들고 내부에 render() { } 를 해준다.return 이 후 엔 소괄호로 묶어주는데, 가독성을 위해 하는 것이니 해주길 바랍니다. 내부에는 html태그로 정리할 수 있습니다. 여기서 'Haamseongho' 라는 단어를 div 태그로 감싸줬는데 반드시 div 태그든 어떠한 것이든 감쌀 수 있는 태그로 감싸줘야 합니다. (Nested Element) == Contain.. 더보기
반응형

티스토리툴바