KBennyCC

글

라벨이 K Benny CC인 게시물 표시

01.7 React ref (DOM에 이름 달기)

- 1월 30, 2019

React.js 01.7 React ref 특정 DOM 요소 에 어떤 작업을 해야 할 때 이렇게 요소에 id를 달면 css에서 특정 id에 특정 스타일을 적용하거나 자바스크립트에서 해당 id를 가진 요소를 찾아서 작업할 수 있다.  <!DOCTYPE html> <html lang= "en" > <head> <meta charset= "utf-8" /> <link rel= "shortcut icon" href= "%PUBLIC_URL%/favicon.ico" /> <meta name= "viewport" content= "width=device-width, initial-scale=1, shrink-to-fit=no" /> <meta name= "theme-color" content= "#000000" /> <link rel= "manifest" href= "%PUBLIC_URL%/manifest.json" /> <title> React App </title> </head> <body> <noscript> You need to enable JavaScript to run this app. </noscript> <div id= "root" ></div>  </body> </html...

자세한 내용 보기

01.6 React 이벤트 핸들링

- 1월 30, 2019

React.js 01.6. 리액트의 이벤트 // 사용방법 /* this.setState({ 수정할 필드 이름 : 값 ,수정할 또 다른 필드 이름 : 값 }); */ render() { return ( < div > < p > 안녕하세요 . 제 이름은 { this .props.name} 입니다 . < /p> < p > 숫자 : { this .state.number} < /p> < button onClick = {() => { this .setState({ number : this .state.number + 1 }); }} > 더하기 < /button> < /div> ); } 01.5.3.4 state 값 업데이트 : setState() 게시글에서 클릭이벤트를 작성해 보았다. 사용법은 일반 HTML에서 이벤트를 작성하는 것과 비슷한데, 주의해야 할 사항이 몇 가지 있다. 01.6.1. 이벤트를 사용할 때 주의사항 01.6.1.1. 이벤트 이름은 camelCase로 작성 HTML 의 onclick 은 리액트에서 onClick 으로 작성해야 하고, onkeyup 은 onKeyUp 으로 작성해야한다. 01.6.1.2. 이벤트에 실행한 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달 // HTML < button onclick = "" > // React < ...

자세한 내용 보기

01.5. React Component

- 1월 29, 2019

React.js 01.5. Component 앞선 01.1/01.2 React JS 특징 및 설치환경 에서 설명했듯이 컴포넌트는 특정 부분이 어떻게 생길지 정하는 선언체이며, LifeCycle API를 이용하여 컴포넌트가 화면에서 나타날 때, 사라질 때, 변화가 일어날 때 주어진 작업을 처리할 수 있고, 메서드를 만들어 기능을 붙일 수도 있다. 리액트 프로젝트에서 서로 조합이 가능한, 모듈화된 컴포넌트를 사용해 만든다. 01.5.1. 컴포넌트 생성하기 01.5.1.1. 컴포넌트 초기 코드 생성 src 디렉터리 내부에 NewComponent.js 파일 생성 termianl이나 cmd에서 명령어를 이용해 만들어도 되고, VS Code 왼쪽 사이드바에 있는 파일 목록에서 마우스 오른쪽 클릭으로 새파일을 생성해도 된다. import React, { Component } from 'react' ; class NewComponent extends Component { render() { return ( < div > 새로운 컴포넌트 < /div> ); } } export default NewComponent; 01.5.1.2. 모듈 내보내기 및 불러오기 내보내기 export default NewComponent; 불러오기 // App 컴포넌트에서 생성한 NewComponent를 불러와 사용한다. import React, { Component } from 'react' ; import NewComponent from './NewComponent' ; class App extends Component { render() { return ( < NewComponent /> ); ...

자세한 내용 보기

01.4 - React JSX

- 1월 28, 2019

React.js 01.4 JSX JSX는 자바스크립트의 확장 문법이다. // JSX Code 를 바벨로 변경하면? // JSX Code var a = ( <div>JSX Code 를 바벨로 변경하면?</div> ) // JSX Code 를 바벨로 변경한 형식 var a = React.createElement( 'div' , null , 'JSX Code 를 바벨로 변경하면?' ); 위의 코드를 보면 알 수 있듯이 JSX는 html 코드를 직접 입력하는 것과 같은 형식으로 볼 수 있다. babel-loader를 사용하여 자바스크립트로 변환할 수 있다. JSX는 리액트용이기 때문에 공식 자바스크립트 문법은 아니다. 01.4.1 JSX 장점 01.4.1.1 보기 쉽고 익숙하다 HTML 코드를 작성하는 것과 비슷하기 때문에 가독성이 높고 작성하기도 쉽다. 01.4.1.2 오류 검사 바벨이 코드를 변환하는 과정에서 JSX에 오류를 감지해낸다. 01.4.1.3 높은 활용도 // src/index.js ReactDOM.render(<App />, document.getElementById( 'root' )); 컴포넌트를 마치 HTML 태그 쓰듯이 사용할 수 있다. 01.4.2 JSX 문법 01.4.2.1 감싸인 요소 // 에러 코드 class App extends Component { render() { return ( <p> Edit <code>src/App.js</code> and save to reload. </p...

자세한 내용 보기