Practical Accumulation

1. 리액트가 동작하기 위해서 이벤트 처리는 필수적이다. 2. 여기서는 인터넷을 찾으면 가장 많은 예제로 사용되는 카운터로 이벤트 처리 작성한다. 2-1 counter.js 파일을 생성하고 아래처럼 작성한다. 2-1-1 babel 컴파일을 위해서 아래처럼 경로를 바꿔주어야 한다. let count = 0 const increment = () => { count++ render() } const decrement = () => { count-- render() } const reset = () => { count = 0 render() } const render = () => { const template = ( Count : {count} +1 Reset -1 ) ReactDOM.render(templa..

1. React를 사용할 때 기본적으로 알아야 할 요소들이 있는데, let, const, arrow function은 필수적이다. 2. const, let은 es6에서 적용된 선언타입으로 사실 특별하게 바뀐 것이 없다. 2-1 const, let으로 선언된 변수는 hoist가 되지 않는다. 2-2 같은 레벨에서는 같은 이름의 변수를 중복으로 사용할 수 없다. var은 그 덮어 써지지만 let, const는 에러발생한다. 2-3 블록 레벨이기 때문에 if, for 같은 블록 내에서 선언되는 경우는 외부에서 참조하지 못한다. 2-4 아래와 같은 방식으로 변하지 않는 것은 const, 값이 변하는 것은 let을 사용하여 접근범위를 고려하여 선언한다. 2-4-1 아래의 if 안에 존재하는 firstname 변수..

1. React는 브라우저에서 동작하는 독립형 클라이언트를 작성하는 기술 중 하나이다. 1-1 이 카테고리의 게시물들은 create-react-app에서 미리 생성 해주는 많은 것들이 어떤 방식으로 설정되는지를 1-2 이해하기 위해 점차적으로 create-react-app으로 실행한 프로젝트의 결과물에 다가간다. 1-3 왜 React가 Angular, Vue보다 좀더 npm 모듈을 자유롭게 활용할 수 있는지 이해하는 것이 주된 목적이다. 2. React는 JSX라는 Javascript를 확장하는 문법을 사용하고 있어 babel 컴파일러의 @babel/preset-react가 필요하다. 2-1 엄밀히 말하면 @babel/preset-env도 당연히 있어야 동작한다. 2-2 babel은 표준자바 스크립트에서..