React 동빈나 강좌 #1

도입

예제코드 1

rendering만 수행하는 형태는 Component로서의 기능이 약하다고 할 수 있다.

react에서는 그냥 함수를 명시하는 형태로 Component를 생성할 수 있다. 그냥 함수를 작성하게 되면 render()가 생략된 형태로 작성된다

예제코드 2

예제코드 3 ( state & props 이용 )

state와 props를 쓰지 않은 기본 코드

1초마다 현재 시각을 출력하는 코드를 생성했다.

props 사용

tick 함수 안에 있던 element속성을 Clock 함수로 빼서 재사용성을 높였다.

state 사용

state를 사용하려면 함수형 component가 아닌 class형 component를 사용해야 한다.

class형 component는 기본적으로 props를 갖고 있다.

state = 특정한 class가 내부적으로 갖고 있는 변수

constructor(props)를 통해 생성자를 명시해줄 수 있는데, 이렇게 constructor를 사용할 경우에는 super() 키워드를 통해 props를 전달받은 것을 초기화해주어야 한다.

state를 사용하여 현재 시각을 출력하는 코드. 그렇지만 시간이 한번 출력되면 고정돼서 바뀌지 않는다. LifeCycle을 이용해서 내부적으로 처리할 수 있게 만들어보자.

LifeCycle 사용

ComponentDidMount() 함수를 이용한다. Mount(초기화)가 끝났을 때 자동으로 불러와 지는 함수

ComponentWillUnmount() = resource 낭비를 막기 위해 해제해주는 것

예제코드 4

JSX에서는 2개 이상의 tag가 들어갈 때는 반드시 <div> tag 등으로 감싸야 한다.