리액트

    [React] JSX

    [React] JSX

    결, 꼬재랑 함께하는 레벨2 방학 스터디 React에서 사용하는 JSX란? JSX(JavaScript XML)는 JavaScript에 XML을 추가, 확장한 문법입니다. XML이란? XML(eXtensible Markup Language)은 W3C에서 개발된, 다른 특수한 목적을 갖는 마크업 언어를 만드는데 사용하도록 권장하는 다목적 마크업 언어이다. XML은 주로 다른 종류의 시스템, 특히 인터넷에 연결된 시스템끼리 데이터를 쉽게 주고 받을 수 있게 하여 HTML의 한계를 극복할 목적으로 만들어 졌다. HTML의 한계? HTML은 확장용이성, 구조용이성, 문서확인용이성 등에서의 한계가 나타났다. 사용자가 주어진 태그의 범위안에서만 문서내의 데이터를 다뤄야했기 때문이다. 따라서 XML이 나타나게 되었다...

    [ReactJS]노마드코더 리액트 기초-04. State

    [ReactJS]노마드코더 리액트 기초-04. State

    노마드코더-"ReactJS로 영화 웹 서비스 만들기"강의를 수강하며 공부한 내용입니다. state React.js에서는 유동적인 데이터를 사용하기 위해 state 객체를 사용한다. props는 매개변수처럼 컴포넌트에 전달되지만 state는 컴포넌트 내에서 관리된다. props와 다르게 state 값을 변경할 때는 직접 조작해서는 안되며 setState 메서드를 사용해야 한다. setState 메서드를 사용하는 이유는 React는 state가 변경될 때마다 변경된 부분을 감지하여 리렌더링 하기 때문에 직접 state를 조작하면 React는 변경된 부분을 감지하지 못한다. state를 사용하여 버튼을 누르면 카운트 되는 예제 import React from "react"; class App extends R..

    [ReactJS]노마드코더 리액트 기초-02.리액트 Set up

    [ReactJS]노마드코더 리액트 기초-02.리액트 Set up

    노마드코더-"ReactJS로 영화 웹 서비스 만들기"강의를 수강하며 공부한 내용입니다. 우선 개발 환경을 세팅하기 위해 1. Node JS 설치(node를 설치하면 npm도 같이 설지 된다.) 2. npx 설치, 터미널에 npm install npx -g 입력 3. git 설치 각각 설치 유무는 터미널에 node -v, npm -v, npx -v, git --version을 입력 하면 알 수 있다. 리액트 프로젝트 만들기 터미널에 npx create-react-app 입력 npx create-react-app my-app 완료가 되면 이렇게 리액트 프로젝트를 설정을 끝내고 vsc 에디터로 프로젝트 파일을 open한다. creat-react-app 란? creat-react-app 에 대한 내용은 아래 링..

    [ReactJS]노마드코더 리액트 기초-01.리액트란?

    [ReactJS]노마드코더 리액트 기초-01.리액트란?

    노마드코더-"ReactJS로 영화 웹 서비스 만들기"강의를 수강하며 공부한 내용입니다. React.js란? 리액트 홈페이지에 들어가면 "사용자 인터페이스를 만들기 위한 JavaScript 라이브러리" 문구가 적혀 있다. 즉 리액트는 프론트엔드 라이브러리이다. React는 컴포넌트 기반으로 데이터를 컴포넌트에 보내면 설계에 따라 UI가 만들어져 사용자에게 보여준다. React를 사용하지 않아도 HTML, CSS를 사용하여 웹페이지를 만드는데 문제가 없다. 하지만 동적인 데이터를 UI에 보내기 위해 복잡하고 많은 상태를 관리해야 한다. 쉽게 말해 DOM를 변형시키기 위해서 특정 DOM을 선택하고 특정 이벤트가 발생하는 것에 대한 변화를 주는데 만약 웹 애플리케이션의 규모가 커지면 직접 DOM을 조작하기에는 ..