Front/React.js 23

[React] 시계 만들기 (Reandering Elements)

1초마다 렌더링을 하며 시간을 알려주는 시계를 만들어 보았습니다 Elements는 한번 생성되면 변경할 수 없음React의 Elements는 변하지 않는 성질을 가지고 있어 생성 후 children또는 attributes를 변경할 수 없으며화면에 생성된 Elements를 업데이트하기 위해서는 기존 Elements를 변경하는 것이 아닌 새로운 Elements를 생성하면 됨React가 렌더링되는 과정은 VirtualDOM(React 엘리먼트)에서 실제 DOM(DOM 엘리먼트)으로 이동하는 과정  작성한 소스코드를 웹사이트로 실행하고 개발자 모드인 F12를 눌렀을 때 1초씩 지날 때마다 개발자 모드의 코드가 깜빡깜빡 거리며 시간이 변경이 되는 시계를 완성하였음라이브러리 불러오는 곳에서 아직 실수를 해서 오류가..

Front/React.js 2024.08.12

[React] 짧고 간결한 코드를 만들 때 사용하기 좋은 JSX

👨‍🎓 JSXReact를 사용하여 개발할 때 거의 필수적으로 사용A syntax extension to javaScript자바스크립트의 확장 문법JavaScript + XML/HTML을 결합한 것const element = Hello, world!;👨‍🎓 JSX 역할XML/HTML 코드를 JavaScript로 변환하는 과정을 거침// JSX를 사용한 코드class Hello extends React.Component{ render(){ return Hello {this.props.toWhat}; }}ReactDom.render( document.getElementById('root'));// JSX를 사용하지 않은 코드class Hello extends React.compone..

Front/React.js 2024.08.06

[React.js] React(리액트)

📓React A JavaScript Library for Building User Interfaces사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리복잡한 사이트를 쉽고 빠르게 만들며 관리하기 위해 만들어진 것SPASingle Page Application하나의 페이지만 존재하는 웹사이트 또는 웹 애플리케이션을 의미하나의 HTML 틀을 만들어 놓고 사용자가 특정 페이지를 요청할 때 그 안에 해당하는 페이지의 내용을 채워서 보내주는 것React는 SPA를 쉽고 빠르게 만들 수 있도록 해주는 도구📓React 장점빠른 업데이트 & 렌더링 속도우리가 웹사이트를 탐색할 때 화면에 나타나는 내용이 바뀌는 것빠른 업데이트는 웹사이트에서 굉장히 중요한 부분 중 하나Virtual DOM 사용가상의 DOMDOM ..

Front/React.js 2024.08.04