리액트 공부(1)

새로운 프로젝트에 투입됐는데 갑자기 쌩뚱맞게 리액트를 사용하게 됐다. 

우선 나는 리액트 로고밖에 모르는 사람이고... 급하게 리액트 공부를 시작하게 된것이 이 글을 작성한 배경이다.

 

우선 기존에 사용하던 JSP와 가장 큰 차이점은 리액트는 하나의 index.html에 여러 컴포넌트를 조립하여 페이지를 동적으로 처리를 해준다.

 

기본적으로 라이브러리이기 때문에 react를 임포트 해서 사용을 한다. 

JS와 JSX가 있는데 JS는 순수 JS 함수가 들어가 있고 JSX는 동적 html 조립을 위한 xml 코드가 들어가 있는  파일이다.

렌더링 되는 시점이나 이런건 잘 모르지만 

지금까지 이해한 결과로는 각각의 컴포넌트가 리턴하는 값에 의해 조립되고 로직이 처리되고 그러는거 같다. 

 

일단 소제목 단위로 하나하나 공부할 생각이다.

먼저 JSX..

1. JSX

 변수나 js코드는 {중괄호}에 감싸 사용을 한다. 이때 따옴표 없이 그냥 사용한다. 

function으로 선언된 함수는 컴포넌트로 태그처럼 사용할 수 있다.   

 

2. element

컴포넌트를 작성하면 -> element를 이용하여 구현됨 -> 시각적으로 보여지는 html

 

React.createElement( 

 type : 문자열인 html 태그, 컴포넌트 명, => 컴포넌트도 타고타고가면 결국엔 html코드로 반환됨

[props], : 속성

[...children]

)

element생성 후에는 children이나 attributes를 변경할 수 없다. 

 

3. 렌더링

리액트로 작성한 버츄얼 돔을 실제 돔으로 이동시키는 과정

 

4. Components  and Props

- compenent : 붕어빵틀

- props : 붕어빵 속, 컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체

 

* 모든 리액트 컴포넌트는 Props를 직접 바꿀 수 없고 같은 Props에 대해서는 항상 같은 결과를 보여줄 것!

 

문자열 이외에는 중괄호로 감싸야함

 

- 컴포넌트 종류

  - 함수 컴포넌트

  - 클래스 컴포넌트

* 컴포넌트 이름은 항상 대문자로 시작해야 한다!!!!!

* 컴포넌트 안에 컴포넌트를 가질 수 있다. -> 컴포넌트 합성

* 재사용 가능한 컴포넌트를 많이 가질수록 코드 속도가 올라감!!