Front-end/React 썸네일형 리스트형 [React] 리액트 엘리먼트(element) 렌더링 1. 엘리먼트(Element) 1) 정의 - Element: 요소, 성분이라는 뜻으로 어떤 물체를 구성하는 성분 - DOM 엘리먼트와 리액트 엘리먼트 비교 DOM 엘리먼트 리액트 엘리먼트 - 웹 사이트에 대한 모든 정보를 담고 있는 객체인 DOM(Document Object Model)에서 사용하는 용어로 HTML요소를 나타냄 - 실제로 화면에서 볼 수 있는 HTML 요소 - 리액트 엘리먼트에 비해서 많은 정보를 담고 있어서 상대적으로 크고 무거움 - 리액트 앱을 구성하는 가장 작은 블록요소 - 화면에 나타나는 내용을 기술한 자바스크립트 객체로 DOM 엘리먼트 형태 - DOM 엘리먼트의 가상표현: 리액트 엘리먼트가 기술한 내용을 토대로 실제 화면에서 보게되는 DOM 엘리먼트가 만들어짐 2) 생김새 리액트.. 더보기 [React] JSX(JavaScript and XML) 1. JSX(JavaScript and XML) - 자바스크립트와 XML/HTML을 함께 사용할 수 있는 자바스크립트의 확장 문법 // HTML의 태그를 사용한 Hello, world!라는 문자열을 값으로 가지고있는 것을 const형의 element 변수에 대입 const element = Hello, world!; - 내부적으로 XML/HTML 코드를 자바스크립트로 변환하는 과정을 거침 - 리액트의 createElement() 함수는 JSX코드를 자바스크립트 코드로 변환해주는 역할을 함 -> JSX코드를 작성해도 최종적으로 자바스크립트 코드가 나옴 2. JSX의 역할 1) JSX로 작성된 코드는 모두 자바스크립트 코드로 변환 JSX로 작성한 코드와 순수 자바스크립트로 작성한 코드 비교 - JSX로 작성.. 더보기 [React] 리액트 시작하기 리액트의 장점인 Virtual DOM을 이용한 빠른 업데이트와 렌더링을 적용하기 위해 HTML 파일에 DOM 컨테이너 추가 -> DOM이 들어있는 곳이 DOM 컨테이너 Root DOM Node라고 부르기도 하는데 Virtual DOM의 시작점(뿌리) CRA(create-react-app) 패키지 리액트 웹 애플리케이션을 개발할 수 있도록 프로젝트를 자동으로 생성해주는 패키지 리액트로 웹 애플리케이션을 개발하는데 필요한 모든 설정이 되어 있는 상태의 프로젝트를 생성해주는 도구 VS Code 터미널에서 명령어 실행 npx create-react-app {your-project-name} npx 명령어는 npm 패키지를 설정하고 곧바로 실행시켜줌 cd my-app npm start 폴더 구조 >node_mod.. 더보기 [React] 리액트 1. 리액트(React) 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리 1) 리액트 정의 사용자 인터페이스(UI, User Interface): 사용자와 컴퓨터 프로그램이 서로 상호작용을 하기 위해 중간에서 서로 간에 입력과 출력을 제어해 주는 것 2) 다양한 자바스크립트 UI 프레임워크 UI 라이브러리: 사용자 인터페이스를 만들기 위한 기능 라이브러리 - 앵귤러(JS AngularJs): 2010년 구글에서 만든 오픈소스 프로젝트로 자바스크립트 기반의 웹 개발 프레임워크2018년에 LTS(Long Term Support: 단기간 버전 업데이트없이 안정적인 버전을 장기간 유지하는 방식)모드에 돌입하였다가 2022년 1월 LTS 중단 선언 후 공식적인 지원 종료 - 리액트(ReactJS): 201.. 더보기 이전 1 2 3 4 다음
