React, JS

 

 

Axios

Promise based HTTP client for the browser and node.js

 

Context

context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 component tree 전체에 data를 제공 가능하다.

 

Hook

함수 컴포넌트에서, react state와 lifecycle features를 연동 가능하게 해주는 함수. class 안에서는 동작하지 않는다.

- class 없이 react를 사용 가능하게 해준다.

 

<State Hook>

import React, {useState} from 'react';

 

함수형 컴포넌트에서 state를 사용할 수 있게 해준다. useState가 return하는 첫번째 인자는 state의 value이고, 두번째 인자는 state의 value를 변경시켜주는 함수이다.

 

const [ count, setCount] = useState(0);

// count라는 새 상태변수를 선언

 

<Effect Hook>

  import React, {useEffect} from 'react';

 

함수형 컴포넌트에서 class 컴포넌트의 라이프사이클처럼 사용할 수 있게 해준다. useEffect의 2번째 인자는 useEffect가 실행되는 조건의 인자를 넣을 수 있다. state나 props의 값을 넣으면 해당 인자가 변할때마다 실행되는 componentDidUpdate와 같은 실행을 한다.

아무것도 안넣으면 해당 component가 리렌더링 될때마다 실행.

 

 

Hook의 규칙

1. 최상위에서만 실행해야한다.  반복, 조건문, 중첩함수 내에서는 사용하면 안된다.

2. react 함수 component 내에서만 hook을 호출해야한다. js함수에서는 호출하면 안됨.

 

export default Component;
//component라는 컴포넌트를 내보내겠다는 의미. 다른 컴포넌트에서 불러와서 사용 가능함.
import Component from './Component';

function App(){
	return (
    		<div>
            <Component />
            //Component = 일종의 ui조각. 쉽게 재사용이 가능하다.
            <Component />
            </div>
        	);
}

 

JSX

리액트에서 생김새를 정의할때 사용한다. HTML같이 생겼지만 JS임.

 

규칙

1. 태그는 꼭 닫아야 함. (input, br 모두)

<br />같이 self closing이라도 해주어야함.

 

2. 두개 이상의 태그는 무조건 하나의 태그로 감싸져있어야 한다.

-> Fragment 사용하기

<>
	<Hello />
	<div> Hello </div>
</>

//브라우저 상에서 따로 별도의 엘리먼트로 나타나는건 아님.

3. JS변수는 {name} 이렇게 사용하기

 

- Naming

background-color 대신 backgroundColor사용하기

 

- Class

class = 대신 className = 사용하기

 

- return

return  (
		여기 안에
		JSX 규칙 맞춰서 작성하기
		);

 

Props

properties.

컴포넌트에 전달되는 props는 파라미터를 통하여 조회 가능하다. props는 객체 형태로 전달되며, name을 조회하고 싶은 경우 props.name을 조회하면 된다.