근데 여기서 이상한게 있다.
App.js에서 그래 js문법의 함수 function은 알겠는데, return 안에 div가 들어있다.
그냥 평소 웹 만들듯이 html 코딩 하면 됨. 자동 완성도 잘됨
- css 속성 먹일 때, class대신 className
근데!
이제 평소처럼 html에 Nav바를 만들려고 하고 속성을 부여하려고
class를 먹이려고 하면
HTMl 쓰는 것처럼 하면 되지만 엄밀히 말하면
HTML처럼 생긴 JSX이다!
그러므로 class라고 하지 않고 className으로 넣어주어야 한다.
왜냐하면 js에서 class라는건 특정 역할이 있기에 중복되어 class를 쓸 수 없는 것.
JSX라고 HTML과 다를거 전혀 없다.
일부 이상한 사람들이 이상하게 써서 그렇지 쫄거 전혀 없다.
그럼 왜 그냥 쌩으로 html 쓰면 되는데 왜 프레임워크를 쓰느냐
- 데이터 바인딩이 쉽다(Vue, Angular도 동일)
데이터 바인딩이란 데이터를 HTML에 꽂아넣는 것
- html에 데이터 바인딩
전통적인 js 데이터 바인딩은
document.getElementById().innerHTML = 'posts'이거를 일일히 해줬어야 한다
그런데 React는
html에
<h4> { posts } </h4>=> 변수명만 중괄호에 넣어주면 끝.
함수 리턴으로도 표현해 변수로 넣을수도 있다.
- src, id, href 등의 속성에도 { 변수명, 함수 등 }
<img src={ logo } />중괄호의 활용은 무궁무진하다.
내가 상상하는 모든 곳에 중괄호를 넣을 수 있다.
className에도 가능
- JSX에서 style 속성 집어넣을 때, object 형식으로
왜냐하면 js에 민감한 기호들이 많기 때문에 style 속성 바로 넣으면 에러
style은 무조건 중괄호 안의 중괄호로 object로 만들어야한다.
<div style={ { color : 'blue' } }>개발 Blog</div>예시,
<div style={ { color : 'blue', font-size : '30px' } }>개발 Blog</div>오류가 발생.
font-size에서 - 를 쓸 수 없다. 왜냐하면 js에서 -는 빼기이다.
그러므로 카멜케이스로 붙여서 써준다.
fontSize로
사실, 일일히 이렇게 object로 만들기 귀찮으므로 className으로 변수를 만들어 넣어준다!
=> 매우 합리적
=> 과제 테스트로 바닐라 js를 이용해 컴포넌트를 만들라는 요구를 받은 적이 있다.
=> 당시 매우 멘붕이었다. 왜냐하면 Vue에서 컴포넌트 생성은 자식 컴포넌트의 이름 등록 후, 그 이름을 부모에게 연결시켜주면 끝났기 때문이다.
=> 매우 검색 결과 function을 만들고 어찌고 저찌고 엄청 복잡해서 프레임워크의 위대함을 깨달았다. 그런데 아니 여기에서 그때 당시 바닐라 js로 컴포넌트를 만들던 형식들을 보게 될 줄이야.
=> 완벽히 일치하는 건 아니지만 당시 만들었던 코드 형식들이 어느정도 지금 보는 react 형식과 매우 유사했었다.
=> 아니 ;; 진작에 알려주지 react 잘했으면 좋겠어요!!!! 라고 ;;
