BE전문가 프로젝트

불변성Element 생성 후에는 Children이나 attributes를 바꿀 수 없다.한번 생성된 후에는 변경이 불가능하다.따라서 변경을 하고 싶다면 새로운 element를 생성 후 변경 후 바꿔야 한다. Elements 렌더링 하기element를 생성 후 보여주기 위해서는 렌더링이라는 과정을 거쳐야 한다.const element = 안녕, 리엑트!ReactDOM.render(element, document.getElementById('root'));element를 생성 후 root div에 렌더링하는 과정 렌더링된 Elements  업데이트 하기function tick() { const elements =( 안녕, 리엑트! 현재 시간: {ne..

react에서 element란 리액트 앱을 구성하는 가장 작은 블록들이다.기존에 우리가 자주사용하던 element는 react의 element가 아닌 DOM Element 이다.React Element와 DOM element의 차이Virtual DOM에 존재하는 element가 react ElementBrowser DOM에 존재하는 element가 Dom Element따라서 react element는 dom element의 가상 표현이라고 볼 수 있다. Elements의 생김새React Elements는 자바스크립트 객체 형태로 존재한다.function Button(props) { return { {props.children} ..

JAX는 JavaScript의 확장 버전이기 때문에 모든 JavaScript의 문법을 지원한다. const name = '홍길동'; const element = 내 이름은, {name}; ReactDOM.render( element, document.getElementById('root') ); 위에서 볼 수 있드시 javaScript와 html이 섞인 형태로 작성된다. html코드를 사용하다 JavaScript 코드를 사용하고 싶다면 중괄호 안에 {javaScript코드}를 넣어주면 된다. function formatUserInfo(user) { return "내 이름은 " + user.name + ", 나이는 " + user.age; } const user = ( name: '홍길동', age: 18..

JSX란? A syntsx extension to javaScript로 자바스크립트의 확장 문법을 의미한다. JavaScript와 XML 또는 HTML을 합친것이다. let dom = 안녕; JSX을 사용하는 이유 xml 또는 HTML 코드를 내부적으로 JavaScript로 변환하는 과정을 거치게 된다. 따라서 JSX로 코드를 작성하면 JavaScript로 변환된다는 것을 의미한다. createElement라는 함수가 jax에서 javaScript로 변환하는 역할을 담당한다. JAX로 작성한 코드 class Hello extends React.Component { reder() { return Hello {this.props.toWhat} } ReactDOM.render{ document.getEleme..

React란? 사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리이다. 화면을 만들기 위한 기능에 대한 라이브러리이다. React를 사용해야 하는 이유 1. 빠른 업데이트와 렌더링 속도 페이지가 넘어갈 때 데이터를 불러오는 속도를 위해 React는 virtual DOM이라는 것을 사용한다. virtual DOM(Document Object Model)이란? 웹페이지를 정의하는 하나의 가상 객체를 의미한다. virtual DOM의 장점 기존의 방식을 사용하여 업데이트를 할 경우 DOM을 직접 수정하여 성능에 영향을 미치며 비용 또한 많이 든다. 반면 React는 DOM을 직접 수정하는 것이 아닌 업데이트할 내용을 찾아 최소한의 데이터만 바꿔준다. 2. 컴포넌트 구조 컴포넌트는 구성요소라는 장점을..