React.js 기초 다지기

목차

1. 리액트란?

2. JSX란?

3. 컴포넌트란?

4. props와 state

5. state와 stateless

6. style 적용하기

7. life cycle

3. 컴포넌트란?

리액트의 컴포넌트

• 리액트 애플리케이션은 컴포넌트로 이루어져 있다!
• 컴포넌트란 작고, 재사용 가능한 코드의 덩어리…
  • 특정 일을 하기 위해 만들어진…
  • 주로 HTML으로 렌더링 되기 위해 사용되는…

리액트 컴포넌트 사용하기

• 컴포넌트는 리액트의 Component 라이브러리 클래스를 상속받아야 한다.

  class YourComponentNameGoesHere extends React.Component {}

• 컴포넌트 클래스의 이름은 첫 글자를 대문자로 해 놓는 게 좋다. UpperCamelCase로 작성해야 함. (컨벤션)

  컴포넌트 클래스는 컴포넌트 자체는 아님! 이건 컴포넌트를 찍어내는 공장 같은 개념임.

• 컴포넌트의 render() 메소드
  • return을 반드시 가지고 있어야 함.
  • render()를 호출하기 위해서는 큰 컴포넌트나 ReactDOM의 render 함수의 첫번째 인자로 넣어주면 된다.

• 인스턴스 만들기 <MyComponentClass /> : 이런식으로 선언해줘야 실제로 인스턴스가 생기는 것!

• 컴포넌트에 변수 어트리뷰트 추가하기
  • 자바스크립트를 컴포넌트 클래스의 return 구문 안에 쓸 수 있다. {}로 싸주면 됨!
  • 변수 같은거 다루려면 render() 함수 내부에 써야 한다. render() 밖에 써주면 오류가 난다고 함!
  • 그리고 return 밖에 써줘야 함! return 내부에 써도 오류가 난다고 함!

• 컴포넌트에 조건문을 쓸 때도 render() 안, return 밖에 써줘야 한다.

• 컴포넌트에 메소드 추가하기

  • 컴포넌트에 render() 말고도 또다른 메소드를 추가할 수 있음.

  • 보통 기존 리액트 메소드와 헷갈리지 않기 위해 앞에 _를 단다거나… 그런 차이를 둔다고는 함.

  • 이 메소드를 클래스 내에서 호출할 경우 this를 붙여주면 됨.

외부 컴포넌트

• 다른 컴포넌트로 해당 컴포넌트를 보낼 땐 먼저 export 해줘야 한다.

  • 기존 js의 export랑 같은 내용이지만, 컴포넌트 클래스 자체를 export 해줄 땐

    그냥 class 선언한 줄 맨 앞에 export 해주면 됨.

• 외부의 컴포넌트를 부를 때는 import 해줘야 한다.

  import { NavBar } from './NavBar.js';

  • 변수 이름을 {}로 싸주는 점이 다르다.
  • [주의] : 파일 끝 .js를 생략하면 자동으로 js로 처리한다고 함!