react3 React-components&Props(3) 개념적으로 component는 Js 함수와 유사 "props"라고 하는 임의의 입력을 받은후 화면에 어떻게 표시되는지를 기술하는 React element를 반환 1. 함수 컴포넌트와 클래스 컴포넌트 //함수형 컴포넌트 //단순한 JS함수 //클래스보다 함수 컴포넌트를 더 많이 쓰는 추세 function Welcome(props){ return Hello, {props.name}; } welcome이라는 컴포넌트 , 데이터를 가진 하나의 "props"(속성을 나타내는 데이터) 객체 인자를 받은 후 React element를 반환 //클래스 컴포넌트 class Welcome extends React.Component{ render(){ return Hello, {this.props.name}; } } //예.. 2023. 2. 7. React-Virtual DOM(2) Virtual DOM(가상 돔) 기존의 DOM(HTML)의 성능 저하, 많은 비용 초래하는 것을 보완 1.JS의 경우 불필요한 변화, 성능 저하, 많은 비용 초래 2.JSX(virtual DOM 사용) 필요한, 변경된 부분만 감지 결론 JS의 경우 부모태그의 div태그까지 변화하였으나, React의 경우에는 virtual DOM(가상담)을 이용하여, 변경된 부분만 감지 ===> Reflow, repaint 과정의 최소화 2023. 2. 2. React-웹사이트에 React추가하기&JSX(1) 웹사이트에 React 추가 https://codesandbox.io/ CodeSandbox: Code, Review and Deploy in Record Time CodeSandbox is a cloud development platform that empowers developers to code, collaborate and ship projects of any size from any device in record time. codesandbox.io CodeSandbox를 통해 웹을 통해 실습이 가능 1. 웹사이트에 React 추가 https://ko.reactjs.org/docs/add-react-to-a-website.html 웹사이트에 React 추가 – React A JavaScript l.. 2023. 2. 2. 이전 1 다음
