가끔 Reactive Web 을 보면 어떻게 만들었나 궁금해서 개발자 도구를 이용해서 javascript를 꺼내볼때가 있다. 그럴때마다 "constructor(e){super(e)" 처럼 React에서는 props로 쓰이던 부분이 "e"로 변경되어있는 것이 눈에 띄이고, 코드가 모두 한줄로 나열되어 있는 모습을 볼때가 있었다. React를 공부해보던중 javascript minify 하는 방법이 있어 찾아보니 npm 모듈을 통해 손쉽게 만들 수 있었다. 방법은 간단하다. 먼저 node.js 가 설치되어있어야하고, terser 라는 모듈이 필요하다. 1. Node.js 설치 2. npm install terser 입력 3. npx terser -c -m -o like_button.min.js -- like..

조건부 렌더링이 뭘까 싶었더니 조건에 따라 어떤 Component를 rendering 하느냐의 의미였던것같다. React 자습서의 예시 코드를 보면 쉽게 이해할 수 있었다. function UserGreeting(props) { return Welcome back!; } function GuestGreeting(props) { return Please sign up.; } function Greeting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return ; ///////////////////// 여기 } return ; ///////////////////// 여기! } ReactDOM.render( // Try changing ..

어떤 프로그래밍 언어든 직접 해보지 않으면, 내가 배운것이 다가 아니라는 것을 계속 깨닫게 된다. React 공홈을 통해 배운 것을 하나로 뭉쳐서 뭘 만들 수 있을까 고민해보다가 state, component 등을 한눈에 볼 수 있는 stop watch로 정했다. 무엇을 구현할지는 아래와 같이 정했다. 1. Start, Stop 버튼 클릭시 stopwatch 실행, 중단 2. Records 버튼 클릭시 현재 시간 기록 3. Reset 버튼 클릭시 전체 초기화 (시간, records 기록 모두 초기화) 1. html 에 넣을 component를 먼저 구현 2. render 부분에 어떤 것을 넣을지 고민해서 시간을 표시하는 Indicator 부분과 버튼부분, records 부분으로 나누었다. (그리고, 상태..

React 공홈에서는 아래와 같은 규칙이 있다고한다. - React의 이벤트는 소문자 대신 캐멀 케이스(camelCase)를 사용합니다. - JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달합니다. html 과 React의 차이를 보면 한번에 알 수 있었다. Activate Lasers Activate Lasers 또한, 태그가 가지는 고유한 기능(?) 을 사용하지 않기위해 아래와 같이 사용하지만, React 에서는 명시적으로 고유한 기능을 쓰지 않을거라고 알려주어야한다. (preventDefault를 사용하면 된다.) Submit // React function Form() { function handleSubmit(e) { e.preventDefault(); console.log('You ..

예전에 React-Native앱을 만들 당시 state, lifecycle 과 씨름한 적이 있었는데, 공식문서에서 만나보니 또 새롭다. 다른 형태의 App들도 그렇듯, lifecycle은 꼭 먼저 살펴보고 지나가는 것이 좋았었다. 이전 강좌를 통해 배운 것은 setInterval을 통해 rerendering 하는 방법을 배웠었다. (아래처럼) function tick() { const element = ( Hello, world! It is {new Date().toLocaleTimeString()}. ); ReactDOM.render( element, document.getElementById('root') ); } setInterval(tick, 1000); state 라는 녀석을 사용하게 되면, s..

3장에서는 React를 이루는 가장 작은 단위인 Element에 대해서 알아 봤었다. 이번 4장에서는 재사용이 가능한 Component와 props - 속성(properties) 에 대해서 배울 수 있다. Component를 정의하는 방법1 - Javascript 함수 작성 function Welcome(props) { return Hello, {props.name}; } Component를 정의하는 방법2 - ES6 Class 사용 class Welcome extends React.Component { render() { return Hello, {this.props.name}; } } 딱 봐도 1번 방법이 생산성면에서 좋아보인다. (간결성이 2번 방법에 비해 좋기때문에) 이렇게 만든 Component..