![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/bSEaou/btq16RgkpAO/W6LIyQlJD6d8yjwPMKgGK1/img.png)
동일한 데이터에 대한 변경사항을 여러 components에 반영할 일이 있다. 이럴 경우 가까운 트리로 state를 끌어올릴 수 있다. 2개의 자식 컴포넌트가 있고 각 컴포넌트는 독립적인 상태를 가지고 있다. 여기서 두 컴포넌트의 상태를 동기화 하고싶다. 여기서 state를 공유하는 일은 그 값을 필요로하는 컴포넌트간 가장 가까운 공통 조상으로 state를 끌어올리기하여 진행할 수 있다. State끌어올리기 현재 두 컴포넌트가 각각의 입력값을 각자의 state에 독립적으로 저장하고 있다. 자식 컴포넌트의 각각의 state는 제거하고 그 상태를 부모 컴포넌트에 옮겨 놓는다. 이제 각각의 상태는 하나의 컴포넌트(부모 컴포넌트)에 저장이 된다. 이를 SOT(source of truth, 진리의 원천이래;;;;..
HTML에서 form은 자체적인 상태를 가지고 있고, 리액트와 조금 다르게 동작함. 만약 name을 입력받는 form이 있을 경우, 사용자가 form을 제출하면 새로운 페이지로 이동하는 기본 HTML form 동작을 수행한다. Name: 하지만 대부분 Javascript function으로 form의 제출을 처리하고 사용자가 form에 입력한 데이터에 접근하도록 하는 것이 편리, 제어컴포넌트라는 기술을 이용함. 제어 컴포넌트(Controlled Component) HTML에서 input, textarea, select와 같은 form element는 일반적으로 사용자의 입력을 기반으로 state를 관리하고 업데이트 함. React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 ..
이벤트 처리 React의 이벤트는 camelCase naming사용을 사용 Button 새 페이지를 기본동작 방지 방법 e.preventDefault(); const submit = (e : React.ChangeEvent){ e.preventDefault(); } click 조건부 렌더링 js의 조건분기처리와 같이 동작함 if(redirect === true){ return ; } return ( 다시 시도하십시오 ); 변수에 element를 할당하여 그대로 rendering하는 방법 const isLoggedIn = this.state.isLoggedIn; let button; if (isLoggedIn) { button = ; } else { button = ; } return ( {button} ..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/3Gcr6/btq1QnsNZqm/EL1MCQNbdSqTdI9hTtfbOK/img.png)
React 컴포넌트의 상태(State)와 생명주기(Lifecycle) State React는 트리형태이고, 자식 컴포넌트는 필요한 데이터를 부모 컴포넌트로부터 Props(Properties)를 받아서 사용을 할 수 있다. 하지만 Props는 읽기전용(props를 수정하면 안된다)이므로 컴포넌트 내에서 데이터의 수정이 필요한 경우에 state에서 변경할 데이터를 관리한다. 따라서 모든 컴포넌트는 state를 가지고 있다. state에서 데이터의 변경을 감지하면 데이터가 변경된 컴포넌트와 그 자식컴포넌트는 Rerendering하여 화면에 출력한다. state는 React의 컴포넌트 내에서 관리되는 일반 Javascript객체이다. 클래스 컴포넌트에서 state 키워드로 데이터를 할당하고, 데이터 변경이 필요..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/eenmys/btq1I7x9L6X/qK2S6Rbi3czhtZH68ogFjk/img.png)
컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다. 컴포넌트는 Javascript의 함수와 유사하다. props라는 parameter를 받아서 화면에 어떻게 표시되는지 작성한다. Components는 함수 컴포넌트와 클래스 컴포넌트가 있다. 이전에 간략히 작성해둔 함수 컴포넌트와 클래스 컴포넌트에 대한 내용이다 kmj24.tistory.com/22 [React]Function Component, Class Component 컴포넌트를 function으로 선언하는것과, class로 선언하는 각각의 방식이 있다. 2가지 선언방식은 어떤점에서 차이가 있을까? 이름 그대로 class component(이하 CC)는 class를 기반으로 작성되는 컴포넌 k..
Element는 React Application의 가장 작은 단위이다. //Element의 형태 const element = Element React의 Element는 일반 객체(plain object)를 쉽게 생성할 수 있다. React DOM은 React Element와 일치하도록 DOM을 업데이트 한다. HTML 파일 어딘가 가 있다고 가정해 봤을 때, 이것을 root DOM node라고 한다. React로 구현된 Application은 일반적으로 하나의 root DOM node가 있고, react를 기존 Application에 통합하려는 경우 원하는 만큼 많은 수의 독립된 root DOM node를 가질 수 있다. React 엘리먼트를 root DOM node에 렌더링 하려면 둘다 ReactDOM..
JSX 는 Javascript를 확장한 문법입니다. Javascript모든 기능이 포함되어 있고, React element를 생성합니다. const element = Hello, React; React는 마크업과 Logic을 둘다 포함하는 Component라는 느슨한 연결의 유닛으로 SOC(separation of concerns, 관심사 분리)합니다. JSX에서는 Javascript 표현식을 넣을 수 있다 아래의 코드를 보면 name이라는 변수를 중괄호로 감싸 사용하고 있습니다. const name = "JSX"; const element = This is {name} ReactDOM.render( element, document.getElementById('root') ); JSX문법은 html 태그..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/G2as0/btq0916H9JQ/MsMWsDAjjvGzv8TnjZPrw0/img.png)
러스트로 컴파일 하는 web assembly 앱을 생성해보았다. 선행 조건은 rust, cargo, node, npm이 설치되어 있어야 한다. wasm package를 build하기위해 wasm-pack을 설치하여야 한다. wasm을 설치할 터미널에 아래를 입력하자. cargo install wasm-pack wasm-pack이 다운받아지지 않는다면 사이트에서 다운받자 여기서 wasm-pack을 다운받을 수 있다. https://rustwasm.github.io/wasm-pack/ wasm-pack rustwasm.github.io 그 다음 rust프로젝트를 생성하자. cargo new --lib 프로젝트명 rust프로젝트가 생성되면 해당 프로젝트의 터미널에 아래를 입력하자. wasm-pack build..