[TIL]react(1) - JSX

👀react 코드 맛보기

: JS의 라이브러리 중 하나로,
component(하나의 의미를 가진 독립적인 단위 모듈)에 의미를 집중하는 프레임워크.

기본적으로는 html,css,js를 이용해서 웹페이지를 만든다.
그런데 이 react라는 framework를 이용해 웹페이지를 만들수도 있다.

만약 이런 로직 하나를 구성해본다고 가정해보자.

SNS twitter 구현 중 tweet form 구현 하기

1. 각 id와 content등을 붙일 DOM을 찾는다.
2. 각 DOM에 엘리먼트의 내용을 계속 집어넣어준다.
3. 바뀐 엘리먼트들을 다시 뷰에 뿌려준다.

근데 위 로직은, 만약 클라이언트와 상호작용하지 않는 로직이라면
단순히 html과 css만으로 구성할수 있겠지만
하지만 이 form의 존재이유는 유저가 사용하기 때문이므로, 우리는 동적으로 제어하게 만들어야 할 것이다.

단순히 폼 하나를 구현하는것도 여러 작업이 들어간다는건 개발자공부를 한다면 누구나 알고있을것이다. DOM과 여러 상태값들을 모두 다루는 복잡한 작업들을 거쳐야 하기 때문이다.

이런 작업들을 위해 만들어진 라이브러리가 바로 react등의 프레임워크라고 한다.

react를 구성하는 이 component는 즉, 나만의 html태그라고 생각하면 된다고 한다.
예를 들어 이전 스프린트 과제들 중 twittler의 tweet 부분 구현 소스를 최소한만 기존 html로 구현해보자면 이럴것이다.

ex)

<div class='tweet'>
  	<span class='userId'>@walli</span>
	<div class='contents'>hello, my name is walli :)</div>
	<div class='time'>43 seconds ago</div>
</div>

위 코드는, react 프레임워크를 사용하여 나만의 html태그를 만들어 소스를 구현해낼 수 있다.

<Tweet userId='walli' time='43'> //Tweet이란 이름의 component.
  hello, my name is walli :)
</Tweet>

👀두 코드의 시각적 비교

react를 사용한 코드는 우선 딱 보기에, html의 기본태그가 다 생략이 되어있으며,

• 부모 엘리먼트의 classname이 --> 부모 엘리먼트의 tagname이 되었고,
• 자식 엘리먼트 중 classname이 'userId'인 el이 --> 부모 엘리먼트의 속성 중 하나가 되었고,
• 자식 엘리먼트 중 classname이 'time'인 el이 --> 부모 엘리먼트의 속성 중 두번째가 되었고,
• 자식 엘리먼트 중 classname이 'content'인 el이 --> 부모 엘리먼트의 input값이 되었으며,
  속성이름 또한 생략되어있다.

=> 훨씬 코드가 직관적이며, 재활용성이 증가되어 보인다.

---

ES6 & JSX

JSX

• JS를 확장한 문법이며, react 라이브러리에 사용이 가능하다.
  react에서의 사용: react 엘리먼트를 생성해주는 역할을 한다.
• react에서 사용이 필수는 아니지만, UI관련 작업을 할 때에 시각적인 도움을 준다.
  ** camelCase 명명 규칙을 사용한다.

JSX 다루기

1). JSX는 중괄호안에, JS의 모든 유효한 표현식을 넣을 수 있다.

ex) name변수를 중괄호로 감싸서 JSX안에 삽입할 수 있다.

const name = 'Josh Perez'; //1) name이란 변수 선언 후
const el = <h1>hello, { name }. </h1> //❌문자열 ❌html 👌JSX
//2)중괄호로 감싸서, JSX안에 사용하였다.

ReactDOM.render(
  el,
  document.getElementById('root');
)

ex) JSX 태그의 속성값으로 JS표현식을 삽입할 수 있다.

const el = <img src={ user.avatarUrl }></img>

ex) JS함수 호출의 결과인 formatName(user)를 < h1>엘리먼트 안에 포함시킬 수 있다.

function formatName(user){
  return user.firstName+ ' ' +user.lastName;
}
const user = {
  firstName : 'Harper',
  lastName : 'Perez',
};

const element = ( //🙋JSX는 가독성↑ 를 위해 (,)로 묶고, 여러 줄로 나누는게 좋다.
  <h1>
    Hello, { formatName(user) }; //중괄호로 감싸서, 
            //호출 결과값인 formatName(user)를 JSX안에 사용하였다.            
  </h1>
)
ReactDOM.render(
 el,
 document.getElementById('root');
)

2). JSX 자체도 표현식이다.

• if구문 및 for loop 안에 사용하고,
  변수에 할당하고,
  인자로써 받아들이고,
  함수로부터 반환시킬수도 있다.

ex) if문안에 JSX 표현식을 넣어서 바로 리턴시킨다.

function getGreeting(user){
	if(user){
    	return <h1>Hello, { formatName(user) }! </h1>
    }
}

👉JSX 문법 규칙

1). 반드시, 하나의 엘리먼트로 자식 엘리먼트들을 감쌀 것.

-> 즉, 1 depth안에 있는 태그가 여러개이면 안된다. 최소 2 depth를 가질 것!

 ❎					  👌
 
<div>					<div> //이렇게 하나의 엘리먼트로 감싸줘야 함.
   <h1>hello</h1>			  <div>
</div>						<h1>hello</h1>
<div>					  </div>
   <h2>jungjae!</h2>			  <div>
</div>						<h2>jungjae!</h2>
  					  </div>
					</div>

---

2). 자바스크립트 코드를 적용할 땐, {}안에 적용할 것!

ex)

class StartReact extends Component{
  render(){
  	const name = 'walli'; //1. 미리 name이란 변수를 js코드로 작성.
    return (
    	<div>
            <h1>hello, { name }!</h1>
      //2. 마치 자바스크립트 코드를 자바에서는 표현식, js에서는 정규표현식으로 끼워넣는것 처럼
      //JSX에서는 중괄호 '{','}'안에 작성하여 포함시킨다.
      </div>
    )
  }
}

---

3). JSX내부에서는 if문 사용대신 > IIFE or 삼항연산자 !

ex)

<div>
  {
   (1+1 === 2) ? (<h1>딩동댕</h1>) : (<h1>탈락!</h1>)
  }
</div>

---

4). 엘리먼트에 클래스이름을 적용할때는 className을 사용한다.

ex)

<div class = 'app-container'> ... </div> //❌❌❌
<div className = 'app-container'> ... </div> //⭕⭕⭕

---

- 그 밖의 JSX의 특징들

☆ JSX는 주입공격(XSS(cross-site-scripting))방지 해준다.

: 모든 항목은 렌더링 되기전에 문자열로 변환되기 때문에, XSS 공격 방지가 가능하다고 한다.

☆ JSX는 객체를 표현한다.

: 'Babel'이 JSX를 'React.createElement()'호출을 통해 컴파일을 시켜줌으로써,
React는 새로운 엘리먼트를 생성하여 반환해준다.

• React.createElement()
  : 사실 각 JSX 엘리먼트들은, 단지 React.createElement()를 호출하는 편리한 문법에 지나지 않는다고 한다.

기본 형식: React.createElement(type, [props], [...children])

=> 인자로 주어지는 타입에 따라, 새로운 react 엘리먼트를 생성하여 반환해준다.
type 인자로는,
1. 태그이름('div','span' ...)
2. react 컴포넌트 타입
3. react fragment 타입 중 하나가 될 수 있다.

ex) 다음 두 예시는 동일하다.

					
const el = (				const el = React.createElement(
   <h1 className='greeting'> 			'h1'
     Hello, world!				{className: 'greeting'},
  </h1>						'Hello, world!'
);					);

👀두 코드의 시각적 비교

react를 사용한 코드는 우선 딱 보기에, '<'태그 -> React.createElement() 로 변경.

• h1 tagname --> type 인자가 됨.
• 문자열 value --> 인자가 됨.

즉, JSX 사용과 react 라이브러리 사용을 비교해본다면..

• JSX : 복잡도 ↓ 가독성 ↑
• react만 사용 : 복잡도 ↑ 가독성 ↓

이 될수 있을 것 같다.

---

❗당연히 아는 사실이겠지만,
JSX를 사용할때에, 최신 문법을 사용할 수 있다고 해서, 최신 함수까지 사용할 수 있는것은 아니다..!
babel은 단지 문법을 변환시켜주는 역할만 할 뿐이므로, 만약 최신 함수들을 적용해보고 싶다면,
별도로 babel-polyfill 이라는 것을 설정하여 최신함수를 사용할 수 있다고 한다!! ❗