React- 리액트 교과서 3장 학습내역 (JSX)

React:

리액트 교과서 3장 (JSX)

이 글은 리액트 교과서 저서를 읽고, 중요 부분을 발췌해 기록한 학습내역입니다.

| 시작하기에 앞서

JSX는 함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 자바스크립트의 확장으로, 특히 React.createElement() 호출을 반복해야 하는 불편을 해소한다. 템플릿 엔진이나 HTML처럼 보일 수도 있지만 그렇지 않다. JSX는 리액트 엘리먼트를 생성하면서 자바스크립트의 모든 기능을 쓸 수 있도록 도와준다.

| JSX의 장점

• 개발자 경험개선 - 표현력이 뛰어나 코드를 읽기 쉽다. xml 과 문법이 유사해 중첩된 선언형 구조를 더 잘 나타낸다.
• 팀의 생산성 향상 - 전문 개발자 외에도 개발 지식의 있는 팀원이있다면 직접 코드 수정이 가능하다. jsx는 html 과 비슷하기 때문이다.
• 문법 오류와 코드량 감소 -작성해야할 코드가 줄어들며 실수와 반복을 줄여준다.

요즘 우리가 개발하는 UI는 상호작용이 많고, 자바스크립트와 HTML이 강하게결합되어 여러 기능을 개발한다. React는 UI와 자바스크립트 로직에 대한 설명을 한 곳으로 모아, 기존의 어긋난 관심사 분리를 고쳐놓았다. JSX를 사용하면 코드가 html처럼 보이므로 이러한 jsx와 react가 결합되면 좋은 개발을 할 수 있다.

• 아래에서 볼 수 있듯, jsx는 여러가지 도구를 사용해서 표준 ECMAScript로 컴파일 할 수 있다.

| JSX의 이해

• jsx에서는 중괄호 {}표기법을 사용해 변수를 동적으로 출력할 수 있으므로 코드가 늘어나는것을 상당히 줄일 수 있다.
• 지역변수 뿐 아니라 속성도 출력할 수 있다.

class DateTimeNow extends React.Component{
  render(){
    let dateTimeNow = new Date().toLocaleString()
    return <span>Hello {this.props.userName} your current date and time is {dateTimeNow}</span>
  }
}

• DOM은 HTML 비표준 속성에 데이터를 저장하는 것은 일반적으로 안티패턴으로 여겨진다. DOM을 데이터베이스나 프론트엔드 데이터 저장소로 사용하는 것이 적절하지 않기때문이다.
• DOM에서 데이터를 가져오는 것은 메모리 상의 가상 저장소에서 데이터를 가져오는 것보다 느리다.

• JSX를 사용할때 반드시 HTML요소의 속성으로 저장해야 하는 경우에는 data-*속성을 사용한다. 예를 들어, 속성에서 <li>요소에 this.reactIsAwsome을 렌더링하려면 다음과 같이 작성 할 수 있다.
• <li data-react-is-awsome={this.reactIsAwsome}></li>

> JSX에서 if/else 구현

• return 문 이전에 JSX 외부에 변수를 선언한 후 JSX내부에서 {}를 사용하여 출력
• return 문 이전에 JSX 외부에서 값을 반환하는 함수 표현식을 선언한 후 JSX 내부의 {}에서 실핸한다.
• 삼항 연산자를 사용한다.  -> 나는 이패턴을 자주 사용한다.
• JSX 내부에서 즉시 실행함수를 사용한다.

class myComponent extends React.Component{
  render(){
    //JSX를 사용하지 않는 영역: 변수, if/else문, 삼항 연산자를 사용
    return(
        // JSX: 삼항연산자 또는 함수 실행 결과를 {}로 표시
    )
  }
}

| Babel을 이용한 JSX트랜스파일러 설정하기

앞에서 이야기했듯이, JSX를 실행하려면 일반적인 자바스크립트 코드로  변환해야 한다. 이과정을 컴파일과 변환을 거친다는 의미에서 트랜스파일레이션이라고 한다.이를 위해 사용할 수 있는 도구가 아래와 같이, 여러가지있다.

• Babel 명령줄 인터페이스 도구

• Node.js 또는 브라우저 자바스크립트로 작성한 스크립트(API방식)

• 빌드도구: Gulp,Grunt,Webpack 에서 바벨을 플러그인으로 사용한다.

• 바벨의 주요기능은 1) es6+/ES2015+ 컴파일러이지만, 2) JSX를 자바스크립트로 변환하기도 한다. React팀도 바벨사용을 권장하고있다고 한다.

> Babel ES6 preset

IE9같은 구형 브라우저를 지원해야 하고, es6+/ES2015+를 사용하고자 한다면 babel-preset-es2015 트랜스파일러를 추가할 수 있다. 이라이브러리를 이용하면, es6코드를 es5로 변환할 수 있다.

다음으로, babel의 presets 항목에 react와 함께 추가한다.

{

"preset": ["react","es2015"]

}

참고로, 구형 브라우저 지원이 필요하지 않다면 es2015 트랜스파일러를 사용하는것을 추천하지 않는다고 한다. es6 코드보다 최적화가 부족한 오래된 es5코드를 실행하게되고, 의존성이 늘어나게 되기 때문이라고 한다.

| React와 JSX의 까다로운 부분

> 특수문자

HTML 엔티티 코드를 사용해 다음 예제 코드처럼 저작권 표시나, 말바꿈표,따옴표등 특수문자를 표시한다.

• &copy;
• &mdash;
• &ldquo;

그렇지만 만약 html 엔티티 코드를 변수나 속성을 사용해 <span>에 동적으로 출력하려고 한다면 특수문자 대신 문자 그대로 들어간다고 한다. 이와 같이, React/JSX는 위험한 HTML 구문에 대해 자동으로 이스케이프를 적용한다고 한다. 이는 보안측면에서 매우 편리하다고 한다.

//동작하지 않는 안티패턴
var specialChar ='©'
​
<span>{specialChar}</span>

> data-속성

dom 노드에 추가데이터를 전달해야 하는경우가 있는데, 그럴땐 속성의 접두사로 data를 사용한다.

<li data-object-id="sad123">...</li>

> 스타일-속성

• jsx에서는 문자열대신 자바스크립트 객체를 전달하고, css속성은 카멜 표기법으로 작성한다. 스타일 속성으로 이해하기 어려운 문자열 대신 자바스크립트 객체를 사용한 이유는 이를 이용해 리액트가 뷰를 더 빠르게 변경할 수 있기 때문이라고 한다.

<span style={{borderColor: 'red',borderWidth: 1,borderStyle: 'solid'}}>hi </span>

> class와 for 속성

class 와 for 대신에 className과 htmlFor을 사용한다.

| 마치며,

• jsx는 그저 createElement같은, React 메서드를 위한 문법적 개선이다.
• jsx는 표준 html속성인 class ,for 대신 className과 htmlFor를 사용한다.
• jsx에서 스타일 속성을 입력할때는 문자열이 아니라, 자바스크립트 객체를 전달한다.
• 삼항 연산자와 즉시 실행함수는 if/else문을 처리하는 좋은 방법이다.