소소한 기록

공식사이트 : https://reactjs.org/docs/handling-events.html 이번 장에서는 이벤트를 다루는 부분에 대해 알아보겠습니다. 리액트 앨리먼트가 이번트를 다루는 방법은 DOM이 이벤트를 다루는 방법과 매우 유사합니다. 아래 몇가지 문법만 빼고요. 리액트 이벤트의 이름은 카멜케이스를 사용합니다. JSX에서 이벤트 핸들러를 함수로 전달할 수 있습니다. 예를들면 html문법은 아래와 같습니다. Activate Lasers 이와 약간 다르게 리액트는 아래와 같이 사용합니다. Activate Lasers 또하나 다른점은 기본작동방식을 막기위해 false를 리턴할 수 없다는 점입니다. 기본작동방식을 막기위해서는 반드시 preventDefault함수를 명시적으로 호출해야 합니다. 예를 보..

공식 페이지 : https://reactjs.org/docs/state-and-lifecycle.html 이번장에서는 컴포넌트 상태와 생명주기에 대해 알아보겠습니다. 이전장에서 살펴봤던 똑딱 시계 예에서 UI를 업데이트할 때 root.render()를 사용했었습니다. const root = ReactDOM.createRoot(document.getElementById('root')); function tick() { const element = ( Hello, world! It is {new Date().toLocaleTimeString()}. ); root.render(element); } setInterval(tick, 1000); 이렇게 사용했었습니다. 이번 장에서는 똑딱 시계를 재사용 가능하고, ..

공식 페이지 : https://reactjs.org/docs/components-and-props.html 컴포넌트는 UI를 독립적이고, 재사용 가능한 부분으로 분리할 수 있게 해 주고, 각 부분을 독립적으로 생각할 수 있게 해 줍니다. 이 페이지에서는 컴포넌트 개념에 대해 설명합니다. 개념상 컴포넌트는 자바스크립트 함수입니다. 그 함수는 임의의 입력값을 받아들이고('props'라고 부르는), 스크린에 어떻게 나타날지를 설명하는 리액트 앨리먼트를 리턴합니다. 1. 함수와 클래스 컴포넌트 컴포넌트를 선언하는 가장 쉬운 방법은 자바스크립트 함수를 쓰는 것입니다. function Welcome(props) { return Hello, {props.name}; } 위 함수는 단일 props를 함수 인자로 받아들..

공식 페이지 : https://reactjs.org/docs/rendering-elements.html 1. html DOM으로 리액트 엘리먼트 렌더링하기 html 안에 위와 같은 DOM이 있습니다. 우리는 이것을 'root' DOM 노드라고 부르는데, 이 안에 있는 모든 것이 React Dom으로 관리될 것이기 때문입니다. 리액트로 만들어진 애플리케이션은 보통 하나의 root DOM 노드를 가집니다. 만약 기존 앱에 리액트를 통합하려고 한다면, 많은 독립된 root DOM 노드를 가지고 있을지도 모릅니다. 리액트 앨리먼트를 랜더링하기 위해서 DOM 앨리먼트를 ReactDOM.createRoot()에 인수로 넘겨주고, 이후 리액트 앨리먼트를 root.render()에 인수로 넘겨주면 됩니다. 아래와 같이..

공식 사이트 페이지 : http://devapps.gnu.ac.kr:1201/nxui/index.html const element = Hello, world!; 여기 선언문이 하나 있습니다. 프로그램을 조금 아시는 분이면 이상함을 느끼실 겁니다. 전 못느꼈지만... element 라는 변수에 값을 할당하는데, 이건 문자도 아니고 html도 아니네요. 문자라면 따옴표로 감싸야 하고, 자바스크립트 내에 html 태그를 바로 쓸 수는 없으니까요. 어쨌든 결과를 말씀드리면, 이 수식은 맞는 표현이고, 이렇게 쓰는 방식을 JSX라고 합니다. JSX의 풀네임은 'JavaScript XML'입니다. 자바스크립트와 XML을 합쳐쓰는거죠. 이번 페이지에서는 JSX로 리액트의 elements들을 만들고, 그것들을 DOM으..

영어공부와 학습을 병행해 보려고 합니다. React를 영문으로 공부해 보는 거죠. 쉽진 않겠지만 천천히 해보겠습니다. 공부할 사이트는 React 공식 사이트입니다. 공식 사이트의 문서로 공부하면 좋은 점이 있습니다. 첫째로, 그것이 곧 법이 입니다. 다른데 문의할 필요가 없죠. 둘째, 자료가 최신입니다. 사이트는 이렇게 생겼습니다. react.com으로 접속해 보면 됩니다. 오늘은 먼저 공식 사이트에서는 react를 어떻게 설명해 놨는지 보도록 하겠습니다. 슬로건이 제일 먼저 보이네요. A JavaScript library for building user interfaces 'UI를 만들 수 있는 자바스크립트 라이브러리'라고 돼 있네요. 영어 초보라 해석이 매끄럽진 않습니다. 이해를... 모듈, 패키지,..