본문 바로가기

리액트기초3

리액트 엘리먼트(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.
리액트의 인덱스(index)파일과 JSX 문법 리액트의 인덱스(index) 파일과 JSX 문법에 대해서 알아보려고 한다. 강의로 들을 때는 어렵지 않은데 막상 블로그에 정리를 하려고 하니 어떤 순서로 써야할지 잘 모르겠다. 혼자 배우는 것과 다른 사람도 알아들을 수 있게 정리하는 것은 난이도가 다르다. 이래서 배움의 끝은 가르침이라고 하나 보다. index.html 파일과 index.js 파일 리액트 프로젝트를 생성하고 보면 public 폴더에는 index.html 이라는 파일이 들어있고, src 폴더에는 index.js 라는 파일이 들어있다. 둘다 index 라는 이름을 가지고 있는데 파일 확장자가 다르다. 이들은 어떤 관계를 가지고 있을까? 먼저 index.html 은 웹브라우저에서 가장 먼저 인식하고 실행되는 파일이다. 그리고 index.js는.. 2023. 1. 8.
리액트(React) 공부 시작! 스마일라식 후 시력이 어느정도 안정되어 백수생활동안 계획했던 목표 중 하나인 리액트(React) 공부를 시작해보려고 한다. 먼저 코드잇이라는 사이트에서 온라인 강의를 듣고, 추가로 인터넷 서치와 리액트 관련 서적으로 독학을 하려고 한다. 공부하여 새롭게 알게 되는 기본 개념과 꿀팁들을 언제든 찾아볼 수 있도록 블로그에 정리할 예정이다. 리액트야, 3개월 동안 나랑 재미나게 놀아보자! 오늘부터 START~* 리액트(React)는 무엇인가? 리액트(React)는 페이스북의 소프트웨어 엔지니어 Jordan Walke가 개발한 자바스크립트 라이브러리 중 하나이며, 사용자 인터페이스를 만들기 위해 사용된다. 싱글 페이지 애플리케이션이나 모바일 애플리케이션 개발에 주로 사용되는 리액트는 '컴포넌트'라는 개념에 집중.. 2021. 10. 18.