🧸이번에는 리액트 컴포넌트를 만들 때 사용하게 되는 문법인 JSX에 대해서 알아보겠다. 🧸 JSX란? JSX는 리액트에서 컴포넌트의 생김새를 정의할 때 사용하게 되는 문법이다. 얼핏보기에는 HTML처럼 생겼지만, 사실은 자바스크립트이다. 어떻게 자바스크립트가 되냐면, 바벨이라는 도구를 통해서 XML 형태의 코드가 자바스크립트로 변환이 된다. babeljs.io 를 들어가서 확인할 수 있다. 다음과 같이 babel에서는 왼쪽의 코드(JSX)를 저렇게 바꾸어준다는 것이다. 매번 createElement라는 것을 써서 호출하기엔 너무 어려우니까 JSX 문법을 통해 쉽게 작성하고, 바벨이 이를 변환해준다. 🧸 JSX의 규칙 JSX에도 규칙이 있다. 그 규칙에 대해서 알아보겠다. JSX에서 return 뒤에 사용..

🍨 이번 시간에는 첫 리액트 컴포넌트를 만들어보겠습니다. src 폴더에 hello.js라는 파일을 만든다. import React from "react"; 그리고 리액트를 사용하려면 항상 파일 위에 위와 같은 코드를 써주어야 한다. 이는 리액트를 불러와서 사용하겠다는 의미가 된다. 🍨 컴포넌트 만들어보기 컴포넌트를 만드는 방법에는 2가지가 있다. 1) 함수 형태로 컴포넌트 만들기 2) 클래스 형태로 컴포넌트 만들기 클래스 형태로 컴포넌트 만드는 것은 나중에 해보고, 일단은 함수 형태로 컴포넌트를 만들어보겠다. import React from "react"; function Hello(){ return 안녕하세요; } export default Hello; 컴포넌트의 이름은 대문자로 시작하며, 단어가 여러..

리액트를 개발하기 위한 작업환경 준비에 대해 알아보겠습니다. 1. node.js node.js란 브라우저환경이 아닌 곳에서도 자바스크립트를 실행할 수 있게 해주는 자바스크립트 런타임을 말함 우리가 리액트 프로젝트를 만들면 webpack, babel같은 도구를 사용해야 하는데 그러한 도구들이 node.js 기반으로 만들어졌기 때문에 node.js를 설치해야 함 2. yarn 자바스크립트 package들을 관리(manage)해주는 도구 node.js를 설치하면 npm이 딸려나오는데 npm으로도 할 수 있긴 함 yarn도 npm이랑 비슷한 도구인데 npm보다 빠른 속도로 다운로드받을 수 있게 해준다. npm에 익숙하거나 yarn을 설치하기 싫다면 yarn은 생략해도 되지만 한 번도 사용해보지 않았다면 사용해보..

프로그램 개발시 환경변수를 저장하기 위해 dotenv를 사용한다. dotenv는 공개되어서는 안되는 중요한 정보들을 위해 주로 사용하기 때문에 은닉되어야 할 정보는 .env파일에서 관리하고 .env파일을 .gitignore에 추가시켜 정보의 노출을 막아주어야 한다. 설치 방법 : npm install dotenv 사용 방법 : 1. 프로젝트의 루트 경로에 .env 파일을 만든다. 2. .env 파일에 설정하고 싶은 변수를 작성한다. REACT_APP_ID_KEY = "blabla" REACT_APP_SECRET_KEY = "blablabla" 3. 프로젝트에서 다음과 같이 사용하면 된다. import dotenv from "dotenv"; dotenv.config(); const API_KEY = pro..

🍉자바스크립트를 사용한 DOM 변형의 한계😥 DOM : 각 HTML에 대한 정보를 지니고 있는 자바스크립트 객체 인터랙션이 자주 발생하고 이에 따라 동적인 UI를 표현해야 한다면 규칙도 너무 다양해지고 관리하기도 매우 힘들 것이다. 웹 어플리케이션이 규모가 커지게 되면 코드가 난잡해지고 유지보수에도 어려움 🍉 새로운 발상을 가지고 등장하게 된 리액트💡 리액트는 어떠한 상태가 바뀌었을 때 DOM을 어떻게 업데이트할지 규칙을 정하는 것이 아니라 아예 다 날려버리고 처음부터 모든 것을 새로 만들어서 보여준다면 어떨까 라는 아이디어에서 개발이 되었다. 그렇게 한다면 업데이트를 어떻게 해야할지에 대한 고민을 전혀 안해도 되기 때문에 개발이 정말 쉬워질 것이다. 하지만 정말 동적인 UI를 보여주기 위해서 모든 것을..