framework/react 3

3. Inputs and State

1. converter (min -> hour) label의 for와 같은 경우에는 JS에서 for 문법이 존재하기 때문에 JSX에서는 html for을 사용 하면 안된다. 헷갈리기때문이다. 쓰면 안되는 html attribute 1. class 2. for 변경 1. className 2. htmlFor 2. unController 된 number event를 바로 받아올 수 있다. 4. state가 한쪽으로만 event를 작동할 수 있도록 하는 방법 state에 2가지 (state date, state f)가 존재하지 않으면 일반 html로 작동 만약 2가지 중 1개(state data)만 default로 존재하고 function이 존재하지 않으면 event 작동하지 않는다. hour에 적용하기 {m..

framework/react 2023.06.08

2. State

1. State 이해하기 state: data가 저장되는 곳 -> 내용 추가 react element = function = react component state 2가지 방식 old 방법 -> 원리 파악용 best 방법 -> old 방법으로 원리 파악 후, 더 편리한 방법으로, 실제 사용하는 방법 1.1. old 방법 {} : 동적 작업 내용을 넣는다. 변수 function ReactDOM 작동원리 초기에 rendering 된 후, rendering을 직접 지정하지 않으면 rendering이 되지 않는다. ReactDOM.render()만 초기 rendering시 render되므로 component내부에 재 render되도록 해당 method 따로 빼주고 rerender되도록 한다. 1.2. reac..

framework/react 2023.06.06

1. The basic of React

1. 소개 react가 왜 만들어졌는지, 어떤 문제를 해결할려고 생겼는지 알아함 생 JS랑 비교해서 어떤 장점이 있는지 비교하면서 왜 필요한지 알게 됨 react는 좋은 지름길을 만들어 놓은 것. 물론 따라야하는 규칙이 많이 존재하기는 함 1.1. React import 3가지 import react file import react dom import babel import 작성 위치 body tag 밑에 작성 console 창 react 적용됨을 확인 2. old react 방식 JS로 counter 만들기 Total click: 0 Click me 2.1. 오래된 방식 React - createElement(), ReactDOM.render() React의 핵심 : 모든 것이 JS로 시작해서 HTML..

framework/react 2023.06.04