React
-
React Counter 초당1씩 증가 예제React 2022. 11. 19. 06:45
setInterval을 통해 render 갱신 const root = ReactDOM.createRoot(document.getElementById('root')); function Clock(props) { return ( counter: {props.val1}. ); } c1 = 0; function tick() { c1++; root.render(); } setInterval(tick, 1000); 실행화면, 초당 1씩 증가한다. Typescript Prj import React from 'react'; class Cnt1 extends React.Component { timerid: any; state = { cnt: 0 }; constructor(props: any) { super(props);..
-
React StateReact 2022. 11. 19. 06:05
State는 props와 유사하지만, 비공개이며 컴포넌트에 의해 완전히 제어된다. Tip1 개발 초기 화면구조 잡기 등 정적 버전을 만들기 위해 state를 사용하지 말 것. state는 오직 상호작용을 위해, 즉 시간이 지남에 따라 데이터가 바뀌는 것에 사용해야 한다. setState함수와 관계 class Clock extends React.Component { render({ Hello, world!+{this.cnt} }); } setState함수(React.Component를 상속받은 클래스의)가 호출되면 render가(React.Component를 상속받은 클래스의) 호출되도록 요청 된다. 그래서 state안에 변수를 만들고 setState함수로 변경되도록 하면 변경을 감지해서 갱신되는 것 처럼..
-
React ElementReact 2022. 11. 19. 06:03
React 엘리먼트는 불변객체다. 엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없다. 엘리먼트는 영화에서 하나의 프레임과 같이 특정 시점의 UI를 보여준다. 2022.11.18 - React Hello world const element = Hello, world; 지금까지 소개한 내용을 바탕으로 하면 UI를 업데이트하는 유일한 방법은 새로운 엘리먼트를 생성하고 이를 root.render()로 전달하는 것이다. 2022.11.19 - React Element 변수 Ex
-
React PropsReact 2022. 11. 18. 22:59
props (“properties”의 줄임말) 개요 간단히 정의 Tsx & Jsx Tag를 통해 component를 생성&사용할 때 서로간 값을 전달하기 위한 매개체다. ComponentA에 ComponentAA와 ComponentAB를 정의해 전달한다. ComponentA는 내부에서 ComponentAA와 ComponentAB를 필요에 따라서 사용할 수 있다. props에 부가적 설명 하나의 component에서 다른 component로 전달되는 argument다. 상위 component가 하위 component의 Props를 정의해준다. (하위를 포함하는) 상위에서 하위로만 전달할 수 있다 하위 component에 대한 Props 타입은 interface 로 정의한다. class constructor..
-
React LifecycleReact 2022. 11. 18. 22:12
React16.4 이상 버전 React16.3 이하 버전 구성 생성 될 때 constructor static getDerivedStateFromProps render React DOM 및 refs 업데이트 componentDidMount 업데이트 할 때 New props static getDerivedStateFromProps shouldComponentUpdate render getSnapshotBeforeUpdate React DOM 및 refs 업데이트 componentDidUpdate setState() static getDerivedStateFromProps shouldComponentUpdate render getSnapshotBe..