[TIL] React JSX

 

 

React 수업이후 틀린 문제 ..

 

 

 

각각 JSX를 쓰고 안쓰고의 차이

실제 렌더링 결과

 

결론

1. JSX 를 사용하면 HTML과 유사한 직관적인 문법으로  UI를 작성할 수 있다.

 

2.사용하지 않을시 React.createElement() 함수를 직접 사용해야 하며, 이는 코드의 가독성을 낮아지게함

 

3. 두방식 모두 같은 결과를 렌더링하지만, JSX를 사용하는 것이 더 편리하고 유지보수가 용이하다.

 

4. JSX는 결국 React.createElement() 호출로 변환됨, 즉 JSX 는 순수 JavaScript 코드를 작성하는 것을 

더쉽게 만드는 Syntactic sugar 임 

 

 

 

 

 

JSX 의 목적이 무엇인지 ? 

 

react 에서 element를 웹상에 렌더링할떄 기존의 html 형식에서 크게 변함없이 작성하도록

도와주는 Syntactic sugar이다.

 

react 에서 파일명을 js 로 쓰던 jsx 로 쓰던 상관없이 동작한다 

보통 일반적으로 확장자명은 js 로 쓰는데

프로젝트에서 정한 rule 을 따라 jsx 로 통일하기도 한다.