TIL 12 - React Basic Concepts
리엑트가 개발된 이유는 페이스북에서 페이스북의 UI를 더 잘 만들기위해서 고민을 하다 나온게 리엑트이라고 한다. 가장 쉽게 생각하면 리엑트는 자바스크립트 UI Library라고 생각하면 된다.
그러면 리엑트를 본격적으로 공부하기전에 라이브러리 그리고 프레임워크라는 컨셉이 뭔지 그리고 리엑트를 왜 쓰는지에 대해서 알아보자!
What is Framework and Library?
이 두가지 컨셉을 쉽게 이해하기 위해서 F1 레이스카를 만드는 과정을 예로 들어보자.
이 두가지 컨셉을 쉽게 이해하기 위해서 F1 레이스카를 만드는 과정을 예로 들어보자.
F1 레이스카를 만드는 과정에서 꼭 사용해야하는 요소와 메뉴얼을 따라서 조립을 해야하는 규약들이 있을 것입니다.
이 요소들과 지켜야 되는 규악이 바로 프레임워크 입니다.
F1 레이스카를 만들 때에는 여러가지 도구들이 필요합니다. 모든 F1 레이스카가 똑같지는 않으므로 각각의 레이스카를 만들때에는 엔지니어가 원하는 특정 도구들을 사용해 레이스카를 조립 하게됩니다.
레이스카를 만들때 필요한 이 도구들이 라이브러리 입니다.
JSX
React
를 사용하기 위해서는 JSX라는 스페셜한 문법을 알아야 합니다. JSX는 JavaScript 확장버전입니다. Syntax Extension for JavaScript
라고 합니다.
JSX는 HTML문법을 JavaScript 코드에 써주면 됩니다. .js파일 어디에서는 필요하면 작성하면 됩니다.
const hi = <p>Hi</p>; const myFavoriteThings = { food: <li>salad</li> animal: <li>dog</li> hobby: <li>golf</li> };
JSX attribute
태그에 attribute(속성을) 주고 싶을 때는 항상 " "
쌍따옴표로 감싸주면 됩니다.
class를 주고 싶을 때 원래 속성면은
class
이지만 JSX에서는className
을 사용합니다.const myFavoriteThings = { food: <li>salad</li>, animal: <li>dog</li>, hobby: <li className = "list-item">programming</li> };
Self-Closing Tag
그리고 JSX에서는 어떤 태그라도 self closing tag가 항상 가능합니다.
<div />와 <div></div>는 같은 표현입니다.
Rendering
html 요소(element), 또는 리엑트 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것을 rendering 이라고 합니다.
ReactDOM.render
함수를 사용해서 리엑트 요소를 화면에 렌더합니다.ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root') );
Author And Source
이 문제에 관하여(TIL 12 - React Basic Concepts), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@wychris/TIL-12-React-Basic-Concepts저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)