참고 : https://velog.io/@gyumin_2/React.js-component%EC%99%80-props

Element? 먼저 Element란 React에서의 가장 작은 단위로 화면에 표시할 내용을 기술한다. const element = Hello, world; 브라우저 DOM Element와 달리 React Element는 일반 객체이며, 쉽게 생성할 수 있다. 더 널리 알려진 개념인 Component와 Element가 혼동될 수 있지만, Element는 Component의 구성요소이다. DOM에 Element Rendering HTML 파일 어딘가에 가 있다고 가정해보자. 이 안에 들어가는 모든 Element를 React DOM에서 관리하기 때문에 이것을 Root DOM 노드라고 부른다. React로 구현된 Application은 일반적으로 하나의 Root DOM 노드가 있다. React Element를..

JSX? 아래의 희한한 변수 선언은 문자열, HTML도 아닌 JSX문법이다. const element = Hello, world!; 좀 낯설긴 하지만, JSX에 대해 한번 알아보자! 🤔 JSX란 쉽게 말해 HTML 문법을 JavaScript 코드 내부에 쓴 것JavaScript eXtension의 약자로 JavaScript의 확장 버전이다. 외관상으로는 HTML같은 마크업 언어를 리터럴로 입력하는 것 처럼 보이지만, 빌드 시 Babel에 의해 JavaScript로 변환된다. JavaScript 코드를 HTML처럼 표현할 수 있기 때문에, 용이한 개발이 가능하다. JSX 문법 1. 반드시 부모 요소 하나가 감싸는 형태여야 한다 Virtual DOM에서 Component 변화를 감지할 때 효율적으로 비교할 ..

React는 Facebook에서 제공해주는 Front-End 라이브러리로 SPA(Single Page Application)나 모바일 어플리케이션 개발 시 토대로 사용될 수 있다. 즉, 현재 웹/앱의 View를 개발할 수 있도록 하는 인기있는 라이브러리이다. (프론트 원탑 아닌가..?🤔) React를 사용하지 않더라도, HTML, CSS, JS를 이용해서 웹 페이지를 만들수는 있지만, React를 사용하면 사용자와 상호작용할 수 있는 동적인 UI를 쉽게 만들 수 있다. 이번 포스팅에서는 React의 특징을 간단히 알아보고, React에 대한 보다 자세한 내용은 앞으로의 포스팅에서 알아보자🤓 1. Data Flow React는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가진다. Angula..