퍼블리싱 & 프론트엔드/React8 리액트 엘리먼트(Element) & 컴포넌트(Component) 리액트의 엘리먼트(Element)와 컴포넌트(Component)의 차이점이 무엇인지 알아보았다. 리액트 엘리먼트(React Element) 자바스크립트 객체 (JSX 문법으로 작성한 요소는 결과적으로 자바스크립트 객체가 됨) 리액트로 화면을 그려내는 데에 가장 기본적인 요소 우리가 실제로 보게되는 화면을 구성하고 있는 블럭 바로 사용되지는 않고 컴포넌트에서 리턴을 받아서 사용함 한 번 생성되면 다시는 변형되지 않음 import ReactDOM from 'react-dom'; const element = Hello, World!; console.log(element); ReactDOM.render(element, document.getElementById('root')); 리액트 컴포넌트(React Com.. 2023. 1. 13. JSX 문법 작성하는 방법 JSX는 자바스크립트로 html 문법을 사용할 수 있도록 만들어주는 문법이다. 그런데 이 문법을 사용하려면 지켜야 하는 규칙들이 몇가지 있다. 지난 포스팅에서도 이미 설명했지만 그래도 중요한 부분이니 다시 한 번 정리하고 넘어가려고 한다. 속성명은 무조건 카멜 케이스로 작성 여러 단어가 조합된 속성들을 사용할 때에는 반드시 카멜 케이스로 작성해 주어야 한다. ex) onClick, onBlur, onFocus, onMouseDown, onMouseOver, tabIndex 예외적으로 "data-" 속성만 카멜 케이스가 아닌 기존 문법 그대로 작성한다. ex) data-status 자바스크립트 예약어와 같은 속성명 사용불가 자바스크립트 예약어와 겹치는 html 속성명은 쓸 수 없다. 그래서 자바스크립트 반.. 2023. 1. 10. <div> 대신에 <Fragment>, 프래그먼트 축약형 문법 쓰기 이번 포스팅에서는 리액트의 Fragment 기능에 대해서 설명하려고 한다. 하나로 감싸진 태그로 작성해야 하는 JSX 리액트에서 JSX 문법을 사용할 때에는 반드시 하나로 감싸진 태그로 작성해야 한다. 아래처럼 태그와 태그를 연달아서 사용하게 되면 오류 표시(빨간색 밑줄)가 나타난다. 이것을 브라우저에서 실행하면 역시 오류가 발생한다. 이 코드를 하나의 로 감싸주면 아래와 같이 오류가 발생하지 않는다. 프래그먼트(Fragment) 사용하기 리액트에서는 외에 라는 기능을 제공한다. 대신에 라는 코드를 자동완성 기능으로 입력한다. 그러면 상단에 프래그먼트가 import 되는 것을 확인할 수 있다. 코드 저장 후에 미리보기를 실행해 보면, 로 감싸지 않아도 화면이 제대로 출력되는 것을 확인할 수 있다. 이런식.. 2023. 1. 8. 리액트의 인덱스(index)파일과 JSX 문법 리액트의 인덱스(index) 파일과 JSX 문법에 대해서 알아보려고 한다. 강의로 들을 때는 어렵지 않은데 막상 블로그에 정리를 하려고 하니 어떤 순서로 써야할지 잘 모르겠다. 혼자 배우는 것과 다른 사람도 알아들을 수 있게 정리하는 것은 난이도가 다르다. 이래서 배움의 끝은 가르침이라고 하나 보다. index.html 파일과 index.js 파일 리액트 프로젝트를 생성하고 보면 public 폴더에는 index.html 이라는 파일이 들어있고, src 폴더에는 index.js 라는 파일이 들어있다. 둘다 index 라는 이름을 가지고 있는데 파일 확장자가 다르다. 이들은 어떤 관계를 가지고 있을까? 먼저 index.html 은 웹브라우저에서 가장 먼저 인식하고 실행되는 파일이다. 그리고 index.js는.. 2023. 1. 8. 리액트 개발자 도구(React Developer Tools) 설치하기 리액트 개발을 할 때 도움을 받을 수 있는 크롬 확장프로그램에 대해서 알아보았다. 리액트 개발자 도구 설치 방법 구글 검색 포털에서 '리액트 개발자 도구'라고 검색하면 아래와 같은 사이트를 발견할 수 있다. 리액트 개발자 도구 대신에 'React Developer Tools'라고 검색해도 된다. 해당 사이트를 클릭하면 구글 브라우저의 확장 프로그램을 설치하는 화면으로 이동한다. Chrome에 추가 버튼을 클릭한다. React Developer Tools의 추가 여부를 한 번 더 묻는 팝업창이 뜨는데 이것도 '확장 프로그램 추가' 버튼을 클릭한다. 확장 프로그램이 설치되고 나면, 크롬 브라우저의 우측 상단에 아래와 같은 아이콘이 표시된다. 만약 발견할 수 없다면 퍼즐 모양의 아이콘을 선택하면 보일 것이다... 2023. 1. 2. 리액트 프로젝트 생성 & 개발모드 실행하기 리액트 환경 세팅을 마쳤으니 이제 본격 리액트 공부 시작이다. 누군가 말하기를, 개발 공부는 세팅이 반이라고 했는데... 정말일까? 세팅은 정말 빨리 끝났는데... 공부도 그렇게 휘리릭 되었으면 좋겠다. (하지만 바람과는 달리 엄청 헤매겠지...🫠) 리액트 프로젝트 생성하기 리액트 프로젝트를 생성하기 위해 바탕화면(Desktop)에 폴더 하나를 만들었다. 폴더 이름(프로젝트명)은 react_study로 정했다. 그 다음 터미널로 이동해서 해당 폴더의 경로로 이동한 뒤에 npm init react-app . 이라는 명령어를 실행시켰다. 리액트 프로젝트를 생성하는 명령어는 아래와 같다. npm init react-app # 디렉토리에 프로젝트를 생성 npm init react-app . # 현재 디렉토리에 .. 2023. 1. 2. 맥(Mac)에서 리액트(React) 환경 세팅하기 리액트 공부를 하기위해 사용하는 맥북에 Node.js와 VS Code, Chrome 브라우저를 설치했다. 개인적으로 VS code와 Chrome 브라우저는 원래 사용하고 있던 거라서 Node.js만 세팅해주면 되었다. Node.js 설치하기 구글에 Nodejs 라고 검색해서 공식 사이트로 이동한다. (아래 링크 클릭해도 됨) https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 최신 버전과 안정적인 버전 두가지 중 하나를 선택해서 설치할 수 있다. 나는 안정적이고 신뢰도가 높은 쪽을 선택했다. 다운로드 한 파일을 실행하면 설치 화면이 나온다. Node.j.. 2021. 10. 18. 리액트(React) 공부 시작! 스마일라식 후 시력이 어느정도 안정되어 백수생활동안 계획했던 목표 중 하나인 리액트(React) 공부를 시작해보려고 한다. 먼저 코드잇이라는 사이트에서 온라인 강의를 듣고, 추가로 인터넷 서치와 리액트 관련 서적으로 독학을 하려고 한다. 공부하여 새롭게 알게 되는 기본 개념과 꿀팁들을 언제든 찾아볼 수 있도록 블로그에 정리할 예정이다. 리액트야, 3개월 동안 나랑 재미나게 놀아보자! 오늘부터 START~* 리액트(React)는 무엇인가? 리액트(React)는 페이스북의 소프트웨어 엔지니어 Jordan Walke가 개발한 자바스크립트 라이브러리 중 하나이며, 사용자 인터페이스를 만들기 위해 사용된다. 싱글 페이지 애플리케이션이나 모바일 애플리케이션 개발에 주로 사용되는 리액트는 '컴포넌트'라는 개념에 집중.. 2021. 10. 18. 이전 1 다음
