사실 아직 다 못뽀갬....
React 공부하면서 찬찬히 내용 추가하겠슴다 ^^7
const element = <h1>Hello, world!</h1>;왼쪽은 JavaScript인데 오른쪽은 html 문법이당...
요런 희한한 문법이 바로 JSX! JavaScript를 확장한 문법이다.
JSX라고 하면 템플릿 언어가 떠오를 수 있지만, JavaScript의 기능이 모두 동작한다.
🤷🏻♀️ 템플릿 언어?
템플릿 언어가 뭘까 궁금해져서 구글링 해봤는데, 아무리 읽어도 무슨 말인지 알 수가 없다.......
뭔지 알아내면 내용 추가 하겠음...!
오!! 내가 올린 질문글에 답변 달림!! 근데 아직 이해는 안됐...... 이해 되면 정리해서 추가하겠습니다...😱
JSX의 장점
React에서 JSX를 쓰는것이 필수는 아니지만, 여러가지 장점이 많기 때문에 쓰는것이 좋다!
(1) 코드가 간결해지고, 가독성이 향상된다!
위의 코드와 아래의 코드는 같은 역할을 하지만, 아래의 코드는 어떤 역할을 하는지 한눈에 바로 알아보기 힘들고, 위의 코드는 훨씬 간결하면서 직관적이다.
(2) 디버깅이 쉬워진다!
(3) Injection Attacks를 방어하기 좋다!
const title = response.potentiallyMaliciousInput;
// 사용자가 이런 input을 입력했을 때
const element = <h1>{title}</h1>;React DOM은 JSX에 포함된 값을 렌더링하기 전에 escape 처리한다.
그 말은, 애플리케이션에서 명시적으로 작성되지 않은 내용은 주입되지 않고, 렌더린 전에 문자열로 변환된다는 뜻...! 따라서 XSS 공격을 방지할 수 있다.
(라는데 사실 정확히 무슨 말인지는 모르겠다........😫)
(4) JSX는 객체를 나타낸다.
위 코드와 아래 코드는 동일한데,
아래 코드의 경우는 React.creatElement 라는 함수가 호출되어서,
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world!'
}
};요로코롬 생긴 element 객체가 생성된다.
이러한 객체를 React element 라고 부른다.
React는 JSX 나타내는 이러한 객체를 읽어서 DOM을 만드는데 사용하고, 항상 최신 상태를 유지한다.
JSX 사용법
(1) JSX element
JavaScript + XML / HTML
간단히 말하면 요렇게 쓰면 된다!
ㅋㅋㅋㅋㅋㅋㅋ 좀 더 자세히 말하면, HTML 문법을 JavaScript 코드 내부에 써주면 그것이 바로 JSX 이다!
const hi = <p>Hi</p>;
const myFavorite = {
food: <li>샐러드</li>,
animal: <li>dog</li>,
hobby: <li>programming</li>
};요렇게! JavaScript + XML / HTML 인 희한한 문법이지만 잘쓴거 맞다ㅋㅋㅋㅋ!
(2) JSX expression
JSX에서는 { } 중괄호 안에 유효한 모든 JavaScript 표현식을 넣을 수 있다.
ex) 2 + 2 , user.firstName function(user) 등등
{ } 뿐만이 아니다. 사실, JSX는 컴파일이 끝나서 JavaScript 정규 문법으로 변환되면, JavaScript 객체로 인식된다.
즉, JSX를 if 나 for 문에 사용하거나, 변수에 할당하거나, 인자/파라미터로서 전달하거나, 함수로부터 반환할 수 있다.
function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}이렇게!
(3) JSX attribute
태그에 attribute(속성)을 정의할 수 있다.
이 때, JSX는 html 보다는 JavaScript에 더 가깝기 때문에,
html 속성명 대신 JavaScript 프로퍼티명 규칙 즉, camelCase로 작성해야 한다.
실제 HTML에서 쓰는 속성명과 다른게 많으니 DOM element 참고하긔!!!!
속성은 " " (쌍따옴표)로 감싸줘야 한다.
const element = <div className="list-item"></div>;요렇게!!!
(className 같은 속성은 처음 볼텐데, JSX에서는 class=" " 를 classNams=" " 으로 표현한다.)
{ } 중괄호를 사용하여 속성 안에 JavaScript 표현식을 삽입할 수도 있다.
const element = <img src={user.avatarUrl}></img>;JSX에서는 어떤 태그라도 Self-Closing Tag가 가능하다.
이 때, <input> 처럼 하나의 태그가 요소인 경우에도 반드시 <input /> 으로 끝내줘야 한다.
<div /> 라던가 <li /> 같은 희한한 태그들이 모두 사용 가능하다.
(4) Nested JSX
( ): 중첩된 요소를 만들 땐 ( ) 소괄호로 감싸준다!<tag>: 항상 하나의 태그로 시작한다.
const wrong = (
<p>list1</p>
<p>list2</p>
);const right = (
<div>
<p>list1</p>
<p>list2</p>
</div>
);왼쪽처럼 제일 처음 요소가 여러개의 형제 태그이면 안된다!!!
오른쪽처럼 하나의 상위 태그로 감싸져 있어야 한다.
JSX에 대해서는 요정도로 정리하고....세션듣고 추가되는 내용은 따로 정리하겠음...!
render 는 잘 이해가 안가서 더 공부하고 추가할 예정
react 튜토리얼부터 왕 어렵다ㅠㅠㅠㅠㅠㅠㅠㅠㅠ
JSX Rendering
렌더링(rendering) : html 요소(element), 또는 React 요소(plain object) 등의 코드가 눈으로 볼 수 있도록 그려지는 것
<div id="root"></div>create-react-app 을 설치하고, public 폴더의 index.html 파일을 열어보면 위와 같은 코드가 있다. (폴더명과 코드의 id명은 당연 바꿀 수 있다. 기본값 기준으로 설명할 뿐!)
여기서 root 란, 포함하고 있는 모든 요소들을 React DOM에서 관리하는, root DOM 노드 를 의미한다.
react로 구현된 어플리케이션은 일반적으로 하나의 root DOM 노드 를 가진다.
React 요소를 루트 DOM 노드에 렌더링하려면 [ReactDOM.render()](https://ko.reactjs.org/docs/react-dom.html#render)로 전달하면 된다.
ReactDOM.render( // ReactDOM.render 함수
<h1>Hello, world!</h1>, // 첫번째 인자 : React 요소
document.getElementById('root') // 두번째 인자 : 해당 요소를 렌더하고 싶은 부모 요소(container)
);
개발 왕초보 코린이입니다!
이 내용은 혼자 동영상 강의&구글링을 통해 배운 내용을 정리하는 것으로, 제가 이해하고 넘어간 개념이 틀렸거나 더 보충할 개념이 있다면 댓글 남겨주시면 정말 감사하겠습니다!!
