일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 게시판
- http://jeonghwan-kim.github.io/dev/2019/06/25/react-ts.html
- toString
- object
- 출처 : https://webdir.tistory.com/506
- 출처 : https://joshua1988.github.io/web-development/javascript/promise-for-beginners/
- https://velog.io/@velopert/create-typescript-react-component
- Today
- Total
목록Javascript/React.js (22)
Back Ground
리액트 이벤트 시스템 render(){ return ( 안녕하세요 {this.props.abcd} 여긴 state 값이 출력됩니다. : {this.state.num} { this.setState({ num:this.state.num + 1 }) } }> ) } HTML과 비슷해보이지만 다른 표현 있어서 주의해야 한다. 1. 이벤트이름은 카멜케이스로 작성onclick -> onClickonkeyup -> onKeyUp 2. 이벤트에 실행할 자바스크립트 코드를 전달하는것이 아니라, 함수 형태의 값을 전달HTML에선 더블쿼테이션안에 실행할 코드를 넣지만리액트에선 함수 형태로 전달한다. onclick="event()" -> onClick={event()} 3. DOM 요소에만 이벤트를 설정할 수 있다.DOM요소..
컴포넌트란? 컴포넌트는 프로그래밍의 한 부분을 의미하며 재사용이 가능한 최소 단위를 말한다. 그래서 객체지향언어를 사용할 때 자주 사용되며 재사용이 가능하기 때문에 컴포넌트 단위로 분류하거나 이동 가능하다는 특징이 있다. 이는 모듈(Module)과 혼동될 수 있는데 모듈은 특정 기능을 온전히 수행할 수 있도록 만들어 졌다면 그 모듈 내에서도 재사용이 가능한 단위가 컴포넌트라 할 수 있다. 웹사이트를 구축할 경우 모든 것을 새로 만드는 웹 사이트를 상상조차 할 수 없는게 현실이다. 대부분이 라이브러리, 플러그인, 모듈 그리고 컴포넌트로 재사용이 되는 부분들이 대단히 많다 하겠으며 이를 얼만큼 효과적으로 가장 적합한 어떤 것을 찾고 적용하는 역량이 더 중요해졌다 말할 수 있다. 출처 : https://web..
JSX란 자바스크립트의 확장 문법으로 XML과 비슷하게 생겼다.JSX는 리액트에서 사용하는 방식중 하나이다 JSX12345var a = ( 리액트 스터디 )cs이러한 모습을 하고있는데 javascript에 Xhtml을 넣은 모습이다 이 코드는 리액트에서만 사용가능하기 때문에바벨로 컴포넌트를 트리구조로 정의되어 변환하는데 JS1234567891011121314var a = React.createElement( "div", null, React.createElement( "h1", null, "리액트", React.createElement( "i", null, "스터디" ) ) )cs이렇게 변환 된다. 이게 무슨뜻이냐면 12345React.createElement( "h1", //요소 null, //기능 "..
React 프로젝트를 만드는 방법은 여러가지 있지만Node.js 기반으로 개발할때 유용하게 프로젝트를 생성 할때[create-react-app] 이 있다. webpack과 babel 등을 사용하여 개발하는 경우가 많은데해당 도구를 설치하고 일일이 설정해야 되는게 정석이지만 쉽게 리엑트 프로젝트를 만들수 있게 해주는 create-react-app 도구를 사용한다. create-react-app npm과 yarn으로 설치할 수 있는데 패키지를 설치하는데 방법이 2가지 있는데1. 지역적(local)으로 설치2. 전역적(global)으로 설치 둘의 차이점은 - 프로젝트 디렉터리에서만 사용할지- 모든 디렉터리에서 사용할지 정하는것인데 create-react-app는 커맨드라인 도구라 모든 디렉터리에서필요하므로 전..
먼저 React를 html에서 link를 이용하여도 사용할 수도 있지만. 우리는 Node를 활용하여 만들것이다. 그러기 위해서 Node를 먼저 설치해준다. Node.js다운로드 : https://nodejs.org/ko/ node.js 다운로드 사이트에서 자신의 windows의 bit에 알맞게 다운로드 할 수있게 되어있다. Node를 설치가 됐다면 npm을 함께 설치되었다. 에디터는 VS Code(Visual Studio Code)를 사용하기로 하였다. 자신에게 맞는 운영체제로 다운로드 해주면 된다. 다운로드 : https://code.visualstudio.com/ 다 설치가 됐다면 저 버튼을 눌러서 확장 프로그램을 설치해주는데 ESLint 자바스크립트 문법을 체크한다. Relative Path 상대 ..
React 시작하기 전ES6 (ECMA Script 2015 ) 방식으로 정리 할 내용이다. ES6가 익숙하지 않다면 먼저 ES6부터 숙지하고 오는걸 추천한다.(이게 ES6방식인지 React방식인지 구분을 할 수 있기 위함 ) 먼저 책은 리액트를 검색하다보면 한번쯤 봤을 법한 VeloPert(김민준)이 쓴 리액트를 다루는 기술 이라는 책으로 배워볼 생각이다.(책 설명이 괜찮게 나와 있어서 맘에 듬 ㅎ) 리엑트란 무엇인가 “컴포넌트” 라는 개념에 집중이 되어있는 페이스북 개발자들이 만든 라이브러리이다. 간단히 설명하자면, 데이터를 넣으면 우리가 지정한 유저 인터페이스를 조립해서 보여준다. 페이스북이 리액트를 만들기 전에도, 이미 Angular, Backbone, Knockout.js, Ember 등의 수많..