React 첫걸음/Jsx

yoohl
yoohl
Aug 31, 2018 · 3 min read

리액트 교과서 2~3장

JSX없이 자바스크립트로만 React 엘리먼트 생성

React.createElement(elementName,data,child..) : 엘리먼트 생성
ReactDom.render() : React 컴포넌트를 실제 DOM에 렌더링, 하나의 엘리먼트만 인자로 전달할 수 있다
React 엘리먼트를 중첩하여 자식 엘리먼트로 추가하려면 createElement()의 세번째 인자로 계속해서 전달 하면 된다.

중첩된 h1 을 감싼 div 추가

컴포넌트 클래스

-class NAME extends React.Component : es6 문법을 사용하여React.Componenet 클래스를 상속받아 React 컴포넌트 클래스(재사용 가능한 UI)를 생성
-render() 메서드를 필수로 사용
-JSX를 사용할 경우 컴포넌트를 담는 변수의 이름은 대문자로 시작
-ReactDom.render()와 유사하게 컴포넌트 클래스의 render() 메서드는 엘리먼트 하나만 반환

React 속성 사용하기

-일반적인 html 요소의 속성(href, title, style, class 등)을 작성 하거나 속성을 코드에서 원하는 대로 사용하기 위함(this.props의 값)
-표준 html 속성명과 일치 할 때만 렌더링 되고 표준 속성이 아니라면 렌더링 하지 않는다
-컴포넌트 속성중 url 이 있다면 this.props.url 로 접근

JSX

함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 자바스크립트의 확장React.createElement() 호출을 반복하는 불편을 해소

JS vs JSX

-표준 html 속성 사용
class -> className
for -> htmlFor

-js 표현
{} 로 감싸기

-if/else 문 사용 불가
삼항연산자 사용 (condition ? true : false)

-inline 스타일
string 형식이 사용되지 않고 key가 camelCase인 Object 사용 (backgroundColor: ‘black’)

    yoohl

    Written by

    yoohl

    UI/markup/Front-end

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade