[노마드 코더] Reusable Components with JSX + Props #2.1

https://nomadcoders.co/courses

1) 내가 이해한 JSX

//JavaScript + HTML
const jsxEl = <h1>Hello, world!</h1>

JSX는 JavaScript 문법과 HTML문법이 합쳐진 형태이다.

React에서 사용되고 UI가 어떻게 생겼는지 나타낸다.

JSX가 HTML같이 생기긴 했지만 JavaScript라는거!

 

JSX는 React에서 "Elements"를 만들어낸다.

 

JSX는 마크업(문서 처리를 위해 문서에 추가되는 정보)과 논리를 따로 분리하지 않고

로직과 합쳐서 "components(요소)"를 만들어낸다.

(쉽게 말하면 JavaScript랑 HTML을 섞어서 요소를 만들어내는 듯)

 

React는 어쨌든 JavaScript이기 때문에 반.드시. JSX를 사용할 필요는 없다.

대부분의 사람들은 JavaScript로 UI를 작업하는 경우에 유용하다고 생각한다고 한다.

에러나 경고 메세지를 보여주는데도 React가 더 유용하다고 한다. 

 

React를 작성하면서 컬리 브라켓( {} ) 안에는 항상 JavaScript 코드가 들어간다!

 

2)부모요소에서 자식요소에게 정보 전달하기

 1)  App()이 부모요소

 2)  Data가 정의되어있고 App()안에 있는 JSX( Html()  +  value )에 데이터가 들어가고

 3)  정의된 Html() 함수에 App()안으로 들어온  value 가 전달이 된다.

 

3)HTML구조를 반환하는 Function 이름은 항상 대문자로 시작해야 된다.