React start

What is React ?

 

React는 UI(User-Interface)를 만들기 위한 자바스크립트 Library이다.

 

* 함수를 { } 로 묶으면 return 을 적어줘야 나타나지만
  함수를 ( ) 로 묶으면 return 없이도 리턴이 가능하다.

 

What is JSX ?

이 문법은 JSX라고 부르며, 자바스크립트의 문법 확장이다.
html 와 js 를 합쳐서 편하게 작성할 수 있다.

 

What is React Component ?

 

props를 input으로 하고
UI가 어떻게 보여야 하는지 정의하는 React Element를 output으로
하는 함수. 

 

일종의 묶음이라고 생각한다. 컴포넌트 안에 여러 요소를 한 기능 단위로 묶어주는 역할.

What is render ?

ReactDOM.render(<Componet함수>, <그릴 실제 DOM element>) 

 

<HelloWord /> 뿐만 아니라, 여러가지 component를 SuperWord함수에 넣을 수 있습니다.

그리고 기존 html tag들도 바로 사용해서 넣을 수 있다.

 

렌더링된 엘리먼트 업데이트

위와 같은 코드의 경우 1초마다 new Date() 를 가져오기 때문에 렌더링이 1초마다 실행되야하지만
React DOM은 엘리먼트와 해당 자식을 이전 엘리먼트와 비교하여 DOM을 원하는 상태로 만들기 위해
필요한 경우에만 DOM 업데이트를 적용한다.

 

선택된 부분만 변경

 

What is props?

 

props는 React에서는 사용자가 컴포넌트에 전달해서 보관하길 원하는 데이터.

포넌트 내에서 데이터가 보관되면, 이 데이터는 수정되지 않고 보존되어야 한다.

만약 props의 값을 변경하고자 할때에는 컴포넌트 내부가 아닌, 부모 컴포넌트에서 이에 대한 부분이 변경되어야 한다.

props의 이름은 해당 컴포넌트가 사용될 컨텍스트가 아니라 컴포넌트 자신의 관점에서 정하는 것이 좋다.

 

<TodoList />안에 todos라는 props를 만들고 그 안에 배열을 넣었습니다.
이것을 TodoList함수에서 props의 todos로 받아 list안에 중괄호를 사용하여 넣을 수 있게 된다.

 

* javascript  :   ( function 함수명(인자) )

  props는      :  ( < 함수명 props= props이름  )

 

+ 이벤트의 JSX 형태 구현해보기

 

What is state ?

class 에서만 사용 가능하고 상태에 따라 상호작용을 구현할 수 있다.

props 와 다르게 변경이 가능하고 component 안에서 생성된다.

state는 props와 유사하지만 비공개이며 컴포넌트에 의해 완전히 제어.

 

 

How to Change functional style to be class ?

1. 동일한 이름으로 클래스를 만든 후 exetends React.Component를 확장.

2. render()라고 하는 빈 단일 메서드를 추가.

3. 함수 내용을 render() 메서드 안으로 옮김.

4. render() 안에서 props를 this.props로 바꿈.

5. 남아있는 빈 함수 선언을 삭제.

App 에서 props 를 상속 받아서

functional 하게 , class 하게 표현.

 

 

Class 에 Local state 추가하기

 

 

1. render() 메소드 안에 있는 this.props.date 를 this.state.date로 변경.

 

2. 초기 this.state를 지정하는 class constructor를 추가. class 컴포넌트는 항상 props로 기본 constructor를 호출해야 함.

 

3. Clock 요소에서 date prop을 삭제

 

componentDidMount() 메서드는 컴포넌트 출력물이 DOM에 렌더링 된 후에 실행.

 

State를 올바르게 사용하기

setState()

this.setState({comment: 'Hello'});

this.state 는 constructor 에서만 지정 가능.

 

JSX 에서의 이벤트 생성

<button onClick={activateLasers}>
  Activate Lasers
</button>