React.js 기초 다지기

목차

1. 리액트란?

2. JSX란?

3. 컴포넌트란?

4. props와 state

5. state와 stateless

6. style 적용하기

7. life cycle

2. jSX 개념알기

JSX란?

• 리액트의 컴포넌트들은 JSX로 구성된다. HTML 태그와 javascript 스크립트를 한 번에!

• 컴포넌트에서 여러 엘리먼트를 렌더링할 때는 꼭 컨테이너 엘리먼트 안에 포함시켜야 한다!

  • <div> 같은걸로 싸줘야 에러가 발생하지 않는다고 함.

• JSX 내부에서 자바스크립트를 쓰고 싶을 땐 {}로 싸주면 됨.

• JSX 내부에서 스타일을 설정하고 싶을 땐 객체로 만들어서 멤버 변수 이름을 camelCase로 써줘야 함.

  • background-color가 아니라 backgroundColor 이렇게!

• 주석 쓰고 싶을 때는 {/**/} 이런 식으로 써줘야 하고, 컨테이너 엘리먼트 안에 포함되어야 한다.

JSX 심화

• JSX에서 엘리먼트에 클래스 요소를 지정할 때는 className으로 붙여줘야 한다.
  • 자바스크립트에 class 개념이 있기 때문
• JSX에서 self-closing 태그의 경우 꼭 닫아줘야 함.
  • <br>안됨! </br>써야 됨…

• JSX도 이벤트 리스너를 가질 수 있다. 사실 리액트 프로그래밍은 이벤트 리스너를 다루는 거라고 봐야 한다고 함….

  • [주의] : JSX에서 이벤트 리스너는 camelCase로 써줘야 함!
  • <img onClick = { 내용 } /> 이런 식으로 이벤트 리스너 부여.
• JSX에서 if문 사용하기
  • JSX 밖에서 if문 사용하기. 조건을 먼저 준 다음에 해당 조건에 맞을 때 JSX 값을 할당한다.
  • ternary 연산자 사용. (Ex. x ? y : z => x 조건이 참이면 y 리턴, x 조건이 거짓이면 z 리턴)
  • && : 앞 절이 참이면 뒷 절 반환. (Ex. { !baby && <li>Pizza</li> })
• JSX에서 map 사용하기
  • map은 리액트에서 자주 쓰이는 배열 메소드.
  • JSX 엘리먼트의 리스트를 만들 때는 map() 메소드가 좋다!
  • JSX에서 리스트 만들 땐 key값 줘야 됨. (id)

렌더링

• render : JSX expression을 렌더한다는 것은 화면에 뿌려준다는 것!

  • ReactDOM : 자바스크립트 라이브러리의 일종. 라이브러리는 몇몇 메소드를 포함하고 있으며, DOM을 다룬다.

  • ReactDOM.render()와 같은 메소드 등이 있다. 얘는 JSX를 렌더링하는 데 가장 많이 쓰이는 메소드로, JSX expression을 갖다가 DOM 노드를 생성하고, 갖다 붙인다. render()의 첫 번째 인자는 JSX expression이고, 이것이 화면에 나타나게 됨.

  • ReactDOM.render()에는 변수나 객체가 들어갈 수도 있다. 꼭 JSX expression일 필요는 없음!

• createElement : JSX를 쓰지 않고 리액트 코드 만들기.

  const h1 = <h1>Hello world</h1>;
  

  const h1 = React.createElement(
    "h1",
    null,
    "Hello, world"
  );
  

  두 표현은 같은 의미임.