React.js 기초 다지기

목차

1. 리액트란?

2. JSX란?

3. 컴포넌트란?

4. props와 state

5. state와 stateless

6. style 적용하기

7. life cycle

6. 스타일 적용하기

리액트에서 인라인 스타일 추가하기

• 인라인 스타일은 attribute로 쓰여질 수 있다.

  <h1 style=>Hello world</h1>

• 주의할 점은 중괄호가 2번 쓰인다는 것!

  • 바깥 중괄호는 JSX에 자바스크립트를 주입한다는 걸 의미하고,

  • 안쪽 중괄호는 자바스크립트 오브젝트 리터럴을 만든다.

    { color: 'red' } 이거 자체가 자바스크립트 오브젝트가 된다.

• 스타일을 오브젝트 변수 자체로 만들어서 갖다 붙여도 된다.

  • 단, 다른 js 파일으로 스타일을 보내기 위해서는 module.exports 해줘야 함!

  ​

주의사항

• 리액트에서는 스타일의 이름을 camelCase로 써줘야 한다!!!!

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

• 숫자를 쓰고 단위를 생략하면 자동으로 px로 처리한다고 함.

  딴거 쓰려면 스트링으로 “2em” 이런 식으로 명시해주면 됨.