소소한 기록

공식 사이트 : https://reactjs.org/docs/lifting-state-up.html 종종 몇몇 컴포넌트들은 같은 데이터 변화를 반영할 필요가 있습니다. 이때는 state를 가장 가까운 공통 조상으로 올려서 공유하는 것을 추천합니다. 그럼 어떻게 작업하는지 알아보겠습니다. 이번 섹션에서는 주어진 온도에서 물이 끓는지 알아보는 온도 계산기를 만들어볼 겁니다. 섭씨온도를 프로퍼티로 받고, 그 온도에서 물이 끓을 수 있는지 출력해주는, BoilingVerdict라는 컴포넌트에서부터 시작해보겠습니다. function BoilingVerdict(props) { if (props.celsius >= 100) { return The water would boil.; } return The water w..

공식 사이트 : https://reactjs.org/docs/forms.html HTML 폼 앨리먼트는 리액트의 DOM 앨리먼트와 약간 다르게 작동하기 때문에, 폼 앨리먼트는 자연적으로 몇몇 내부 상태를 유지합니다. 아래 예를 보면, 이 폼에서 순수한 HTML은 단일 이름을 받아들입니다. Name: 위의 폼은 유저가 폼을 서브밋했을 때, 새 페이지로 이동하는 기본 HTML 폼을 가지고 있습니다. 리액트에서 이 동작을 수행하길 원한다면, 그냥 동작합니다. 그러나 대부분의 케이스에서, 폼을 제출하고, 사용자가 입력한 데이터에 액세스할 수 있는 자바스크립트 함수가 있다면 편리합니다. 이걸 이루기 위한 표준적인 기술을 "콘트롤 된 컴포넌트" 라고 부릅니다. 제어된 컴포넌트 HTML에서 ,,와 같은 폼 앨리먼트는..

공식 사이트 : https://reactjs.org/docs/lists-and-keys.html 먼저 자바스크립트에서 리스트를 어떻게 변형시키는지 살펴보겠습니다. 아래의 코드는 배열에서 값을 가져오고, 그 값을 두배로 만드는데 map() 함수를 사용합니다. map() 함수에 의해 리턴된 값을 새로운 배열에 할당하고, console.log() 함수를 이용해 내용을 출력해봅니다. const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map((number) => number * 2); console.log(doubled); 이 코드는 콘솔에 [2, 4, 6, 8, 10]을 출력합니다. 리액트에서 배열을 앨리먼트의 리스트로 변형하는 것은 위 방식과 거의 동일합니다..

공식사이트 : 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으..

공식 사이트에 들어가면 조심하셔야 됩니다. 영어도 영어지만 자칫하면 길을 잃을 수 있습니다. 곳곳에 링크들이 클릭을 유도하죠. 한 번 빠지면 다시 돌아 나오는 길은 쉽지 않습니다. 영포자가 미국에서 길을 잃는 게 이런 느낌일까요? 길 잃지 않게 조심하시고, 천천히 시작해 보시죠. 처음 살펴볼 내용은 'Getting Started(시작하기)' 부분입니다. 본격적인 공부에 앞서 전체적인 내용을 사알~짝 핥아보는 부분이랄까요? 주소는 아래와 같습니다. https://reactjs.org/docs/getting-started.html 이 페이지의 내용은 크게 다섯 가지로 이뤄집니다. Try React(써봐라) Learn React(공부해라) Staying Informed(정보유지) Versioned Docume..

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