react.js 2

[React] JSX

1. JSX란? JSX는 JavaScriptXml의 줄임말로 자바스크립트에 xml이 추가된 자바스크립트 확장문법이다. 리액트는 공통적인 로직은 따로 분할해서 사용하는데 이런 컴포넌트 형식으로 만드는데 유용하게 사용하고 있다. 2. JSX 사용하기 리액트 설정이 모두 완료되면 볼 수 있는 파일들이 있다. 위 파일들 중 index.js 먼저 확인해 보자. 여기서 봐야 할 부분은 ReactDOM.createRoot 리액트를 실행하면 모든 요소들이 저 ReactDOM을 거쳐 render 하게 되어있다. 나는 쉽게 저 영어를 해석했다 '뿌리를 생성하다' 생성한 뿌리를 실행하다. (단순) render부분에서는 이 보이는데 이것이 컴포넌트이다. 다시 말해, 저 코드는 App을 실행하기 위한 돔이라고 볼 수 있다. A..

리액트(React) 2023.02.28

[React] 리액트 실행해보기

리액트 란? 인터페이스 구축을 위한 javascript 라이브러리이다. 그럼 리액트가 필요한 이유는 뭘까? Component(컴포넌트) 페이지마다 공통적으로 사용되는 코드들을 따로 빼서 관리 - 컴포넌트화 방식 중복코드를 방지할 수 있다. 컴포넌트 기반의 UI 라이브러리 선언형 프로그래밍 명령형 프로그래밍인 Jquery와는 다르게 선언형 프로그래밍으로 코드를 간단히 줄일 수 있다. 명령형 - 결과에 대한 과정을 하나하나 나열하는 것 / 선언형 - 목적을 분명히 한 것 Virtual DOM 브라우저는 이벤트 하나를 실행할 때마다 새로운 돔을 형성하게 된다. 예를 들어, 버튼하나를 눌러 여러 이벤트를 실행시키더라도 실상은 버튼하나를 눌렀을 때 이벤트의 개수만큼 돔 요소가 추가되어 브라우저 동작을 하고 있다...

리액트(React) 2023.02.16