STATE & JSX

STATE

state?

상태.

굳이 state를 써야 하는 이유는?

UI를 바꾸기 위해.

State는 React에서 제공하는 Hook으로서 지금 내 수준엔 함수, API로 이해.

wtf is HOOK??

React 16.8 버전에서 새롭게 추가된 리액트 라이브러리 사용방법.

Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해줍니다.
또한, Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수입니다.
출처 : https://ko.legacy.reactjs.org/docs/hooks-state.html

EX)

>const [state, setState] = useState('초기값');
>const [count, setCount] = useState(0);
>const [todoList, setTodoList] = useState([]);

JSX

JSX??

JavaScript+XML

wtf is JSX??

위에 희한한 태그 문법은 문자열도, HTML도 아니다.
JSX라 하며 JavaScript를 확장한 문법이다.
UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용할 것을 권장한다.
JSX라고 하면 템플릿 언어가 떠오를 수도 있지만, JavaScript의 모든 기능이 포함되어 있다.
출처 : https://ko.legacy.reactjs.org/docs/introducing-jsx.html

JSX는 JavaScript의 모든 기능이 포함되어 있으며, React Element를 생성하기 위한 문법이기도 하다.

EX)

const element = <h1>Hello, World!</h1>;

React에서는 HTML 파일이 딱 하나만 존재.
그럼 대체 유저의 화면에다가 어떻게 뷰를 그려준다는 말?

JSX문법을 사용, React 요소를 만들고 DOM에 렌더링 시킴.

<div>
	<h1>안녕하세요!</h1> 
	<p>시작이 반이다!</p>
</div>

요 녀석은 HTML에서만 사용가능하고 JS 파일 형식에서는 못 씀.

const start_half = <div>
    <h1>안녕하세요!</h1>
    <p>시작이 반이다!</p>
  </div>;

이런 식으로 바꿔서 써줘야함.
예시는 짧기 때문에 JS에서 편하게 작업하는 것에 대해서 못 느낄 수 있을 듯.

JSX 사용하며 주의할 점

태그 반드시 닫아줘야함.

컴포넌트에서 반환할 수 있는 엘리먼트는 1개.

function App() {
	return (
    <p>안녕하세요! 리액트 반입니다 :)</p>

    <div className="App">
      <input type='text'/>
    </div>
  );
}
이건 <p>와 <div> 2개라서 안됨.

return (
    <div className="App">
      <p>안녕하세요! 리액트 반입니다 :)</p>
      <input type='text'/>
    </div>
  );
이런 식으로 <div>에 넣어줘서 <div>엘리먼트 1개를 반환할 수 있게 해야함.