Be lazy, Be crazy

리액트 개발환경 세팅하고 App.js 파일을 열었는데 분명 같은 코드도 있고 HTML 형식 같은데 class가 아니라 JS처럼 className이 적혀있네요? HTML인 것 같지만 이것은 JSX (JavaScript eXtension) 라는 문법입니다. JS파일 안에서 HTML을 작성하기 위해 도와주는 리액트 기본 내장 문법이라 생각하시면 됩니다 일종의 JS이기 때문에 className이라고 써야 CSS의 class명과 연결할 수 있습니다 리액트에서는 HTML 대신 JSX라는 문법을 사용할 수 있습니다 그렇다면 HTML이 아닌 JSX 문법을 사용하는 이유가 무엇일까요? 바로 데이터바인딩 때문입니다. (JS 데이터를 HTML에 넣는 작업을 뜻합니다) 예를 들어, 변수를 div의 내용으로 넣고 싶다고 할 때..

리액트 개발환경을 빠르게 셋팅 해봅시다 셋팅을 위해 필요한 건, 3가지 1. Node.js 최신버전 2. VSCode 3. create-react-app 라이브러리로 프로젝트 생성하기 순서대로 해봅시다 1. Node.js 먼저 Node.js는 홈페이지가서 가장 최신 버전(오른쪽꺼)으로 설치합니다 맥북 M1은 가끔가다 라이브러리 이용에 어려움이 있을 수 있으니 LTS버전을 추천합니다 2. VSCode 운영체제에 맞는걸루 깔아주세요 3. create-react-app 라이브러리로 프로젝트 생성하기 작업할 폴더 하나 생성해서 VSCode 에서 열어주고 VSCode 터미널 열기 (상단 탭 메뉴에 Terminal - New Terminal 또는 단축키 ctrl+shift+`) npx create-react-app..

웹사이트는 HTML/CSS, JS로도 충분히 기능구현이 가능한데 왜 리액트를 써야하는걸까요? React는 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여줍니다. 애플리케이션의 각 상태에 대한 간단한 뷰만 설계하세요. 그럼 React는 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링 합니다. 선언형 뷰는 코드를 예측 가능하고 디버그하기 쉽게 만들어 줍니다. 리액트를 사용하는 이유는 상호작용이 많더라도 효율적으로 작동하는 웹앱 개발을 위해서라고 요약할 수 있겠네요 리액트를 배우는 궁극적인 목표는 리액트 문법으로 멋진 웹앱을 보다 편하게 제작하기 위해서 웹앱(Web App)? 웹 기술로 구현한 앱입니다 (말 그대로 앱 같은 느낌이 나는 웹) 웹앱은 포스팅하거나 다른 페이지로 이동하거나..