ref는 언제사용할까? Dom에 직접적으로 접근해야하는 상황이라고한다. 1. state로 상태변화 rendering하기 우선 값 변화에따라 state를 사용해서 만든 소스를 구현해보자 import { Component } from 'react'; import './ValidationSample.css'; class ValidationSample extends Component { state = { password: '', clicked: false, validated: false, }; handleChange = (e) => { this.setState({ password: e.target.value, }); }; handleButtonClick = (e) => { this.setState({ click..

웹브라우저에서 DOM요소들과 상호작용하는것을 이벤트라고한다 1. 마우스커서에 올렸을때 onmouseover 이벤트 실행 2. 클릭했을때 click 이벤트 실행 3. Form 요소 바뀔때 onchange 이벤트 실행 리액트의 이벤트 시스템은 HTML 이벤트와 사용법이 꽤 비슷하다 1. 이벤트 핸들링 다루기 1. onChange 이벤트 핸들링하기 onChange이벤트를 설정하는 코드를 작성한다 import { Component } from 'react'; class EventPractice extends Component { render() { return ( 이벤트 연습 { console.log(e); }} > ); } } export default EventPractice; 콘솔쪽에 찍히는 로그를 확인해..

2010년 김연아 자서전 중에서 그저 꿈꾸는 것만으로는 오래 행복할 수가 없었다. 그래서 나는 그 꿈을 이루고 싶었다. 승부욕이 강한 나는 일등을 하고 싶었고, 그것이 꿈을 이루는 것이라고 생각했다. 그러다가 어느 순간 나의 경쟁상대는 '나'라는 생각이 들기 시작했다. 먹고싶은 걸 모조리 먹어버리고 싶은 나, 조금 더 자고 싶은 나, 친구들과 자유로운 시간을 보내고 싶은 나, 아무 간섭도 안 받고 놀러다니고 싶은 나, 하루라도 연습 좀 안 했으면 하는 나, 내가 극복하고 이겨내야 할 대상은 다른 누군가가 아니라 내 안에 존재하는 무수한 '나'였던 것이다. 이런 나를 극복하려면 어떻게 해야할까? 그래, 즐겁게 하자. 피할 수 없으면 즐기라고 하지 않았던가? 중요한 것은 성공하느냐 실패하..

컴포넌트를 선언하는 방식은 두가지이다 하나는 함수 컴포넌트, 다른하나는 클래스 컴포넌트이다 1. 클래스형 컴포넌트 import { Component } from 'react'; import './App.css'; class App extends Component { render() { const name = 'react'; return {name}; } } export default App; 클래스 컴포넌트에서는 render 함수가 꼭있어야한다. 그렇다면 함수 컴포넌트와 클래스컴포넌트는 어떨때 사용해야할까? 함수 컴포넌트의 단점은 state와 라이프사이클 API의 사용이 불가능하다 이단점은 리액트 버젼 16.8이후 Hooks라는 기능이 도입되어서 해결되었다. 리액트 공식 매뉴얼에서는 컴포넌트를 새로 작성..

1. 코드 열어보기 만든 플젝트를 연후 src/App.js 파일을 열어보자 import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to reload. Learn React ); } export default App; 여기서 코드를 하나씩이해해본다 import logo from './logo.svg'; import './App.css'; import 구문이 사용할시 다른 파일들을 불러와 사용할수있다. 이렇게 모듈들을 불러와서 사용할수있는건 브라우저에 없는 기능이였다 브라우저가 아닌 환경인 Node.js에서 사용해온방법이다. (requrire 구문으로 import) 이러한 기능을 브..

리액트 프로젝트를 만들어보자 1. Node.js와 npm 설치 리액트 프로젝트를 만들때는 Node.js를 반드시 설치해야한다. Node.js는 자바스크립트 런타임이다. 이것으로 웹브라우저 환경이아닌곳에서도 자바스크립트를 사용하여 연산할수있다. 리액트 애플리케이션은 웹브라우저에서 실행되는 코드이지만 ECMASCRIPT 6, 바벨, 웹팩, 서버구현 등등 필요한 여러 도구들이 Node.js를 사용하기 때문에 Node.js 설치를 한다. Node.js 설치시 Node.js 패키지매니저도구인 NPM이 설치된다. 아래 사이트에가서 최신버전 또는 LTS버전의 node.js 를 설치할수있다. LTS버전은 장기적으로 안정적인 지원을 제공하므로 LTS버전을 설치하는것도 추천한다 (매10월쯤 버전업데이트됨) https://..