Skip to content

lecture3_5장.md

Latest commit

 

History

History
132 lines (104 loc) · 5.24 KB

lecture3_5장.md

File metadata and controls

132 lines (104 loc) · 5.24 KB

5장 JSX를 사용하는 리액트

  • 앞에서 본 것과 같이 React element를 만들기 위해서는 React.createElement 를 사용하거나 팩토리를 사용해야 한다.
  • 위 라이브러리를 통해서 개발을 할 수 도 있지만 너무 번거로운 입력이 필요하다.
  • 그래서 좀 더 간단하게 React element 를 생성하기 위해서 jsx 가 나오게 되었다.

jax?

  • javascript for xml 의 줄인말.
  • javascript 의 확장 문법
  • 아래와 같은 형태로 표현
const element = <h1>Hello, world!</h1>;

왜 jax?

  • 보통 개발할 때 html과 javascript 소스를 분리해야 한다고 생각한다.(관심사분리)
  • 하지만 jax를 사용하게 되면 html 부분과 javascript 소스를 같이 구현해야 한다.(스파게티 소스인가...)
  • react는 관심 사항을 어떻게가 아닌 무엇을에 둔다.
  • 그래서 react의 경우 관심 사항은 component 이다.
  • 관심에 맞는 component 작성하고 관심 사항이 동일하다면 javascript 부분과 html 부분을 같은 component로 구성한다.

jax 팁

  1. 내포된 Component

    • jax는 다른 Component의 자식으로 컴포넌트를 추가할 수 있다.
    <IngredientsList>
    <Ingredient />
    <Ingredient />
    <Ingredient />
    <Ingredient />
</IngredientsList>

  2. 자바스크립트 예약어 표현

    • class 같은 경우는 자바스크립트 예약어이기 때문에 className을 사용
    • tabindex 의 경우는 tabIndex 를 사용

  3. 자바스크립트 식

    • jax는 자바스크립트 식(javascript expression) 을 포함할 수 있다.
    function formatName(user) {
    return user.firstName + ' ' + user.lastName;
}

const user = {
    firstName: 'Harper',
    lastName: 'Perez'
};

const element = (
<h1>
    Hello, {formatName(user)}!
</h1>
);

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

  4. 평가(evaludte)

    • 자바스크립트에 평가(evaludte)라는 말은 자바스크립트를 실행해서 그 결과 값을 가져온다는 것을 의미한다.
    • 그렇게 때문에 덧셈과 같은 수식이나 함수 호출 등이 일어날 수 있다.
    <h1>{'Hello' + this.props.title}</h1>
<h1>{this.props.title.toLowerCase().replace(/ /g, '-')}</h1>

  5. 배열을 jax로 매핑하기

    <ul>
    {this.props.ingredients.map(ingredient, i) => <li key={i}>{ingredient}</li>}
</ul>

바벨(babel)

  • 자바스크립트를 인터프리트 언어라서 브라우저가 코드 텍스트를 해석하기 때문에 컴파일 할 필요가 없음
  • 최근 자바스크립트가 많은 발전을 하고 있음(es2015, es2016, es2017, jsx 등등)
  • 하지만 모든 브라우저에서 아직 es2015+를 지원하지 않고 있기 때문에 es2015+를 직접 사용할 수 없음
  • 그래서 현재 거의 모든 브라우저에서 지원하는 es5 버전으로 transpiling 해줄 도구가 필요하게 됨
  • 바벨은 위의 기능을 해주는 도구
  • 예제 소스 링크

웹팩

  • react 프로덕션을 사용하려면 고려해야 할 사항이 많다.
  • jsx, es6 이상의 트랜스파일링 처리 방법
  • 프로젝트의 의존 관계, 이미지, css 최적화 등등
  • 위에 문제를 해결해 줄 수 있는 여러 도구들이 있다(브라우저리파이, 걸프, 그런트 등등)
  • 그 중 가장 많이 사용하고 있는 것이 웹팩(webpack)
  • 모듈 번들러
    • 여러 파일을 받아서 하나의 파일로 묶어준다.
    • 이럴 경우 각각의 개발할 당시 각각의 소스를 모듈화 할 수 있으며, 배포 시 파일의 양이 줄기 때문에 네트워크 성능을 향상 시킬 수 있다.
  • 웹팩 로더
    • 브라우저에서 실행할 수 없는 언어에서 브라우저가 실행할 수 있는 언어로 변화시켜 주는 것
    • 대표적은 예로 babel-loader가 있다.
  • 웹팩 사용시 장점
    • 모듈성
      • 자바스크립트 소스를 좀 더 모듈화 해서 관리하기 쉽고, 테스트하기 편한 코드로 변경할 수 있다.
    • 조합
      • 모듈화된 소스는 재사용하기 쉽기 때문에 다른 프로젝트에서 조합해서 다시 사용할 수 있다.
    • 속도
      • 일관성있는 소스를 하나로 묶으면 대기 시간이 없기 때문에 속도가 빨라짐
    • 일관성
  • 예제 소스 링크

create-react-app

  • 웹팩이나 이런 자바스크립트 도구들이 너무 많다.
  • react만 공부하고 싶은데 다른 것도 공부해야 한다...
  • 그래서 create-react-app 이라는 툴을 제작
  • 위에서 해주는 역할을 이 툴이 알아서 해줌

참고자료

  1. 러닝 리액트
  2. https://reactjs.org/docs/introducing-jsx.html
  3. https://reactjs.org/docs/jsx-in-depth.html
  4. https://reactjs.org/docs/typechecking-with-proptypes.html
  5. https://babeljs.io/
  6. https://webpack.js.org/