리액트 특 2

리액트에서는 자바스크립트 문법이 아닌
jsx를 사용해야함

---

jsx 시작

특2 jsx 문법을 사용해라

jsx문법은 중괄호를 기억해라 !!

파라미터는 꼭 중괄호에 담아야함

{ 생각하는거 모든걸 넣을 수 있음 }

파라미터를 넣고 싶을땐 중괄호 안에 넣어야함

리액트 공식문서의 예제를 가져옴

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

---

삼항연산자

자바스크립트는
if문을 통해서 조건을 부여한다.

if(id.length >= 8){
  return 지금 이거 이해하시면 다음단계로
} else {
  return 이해못했으면 자바스크립트 공부하러 가삼 
}

아이디 길이가 8자 이상이면 다음단계로..
암튼

리액트는 if문 대신 삼항연산자를 사용해서 조건문 표현가능
조건 ? 참이면 실행 : 거짓을 실행

//먼저 중괄호 열고 
{
id.length >= 8
? 다음단계로 
: 글자수가 부족합니다. 아이디 다시 만들어주세요
}

대표적으로 어떤 화면을 보였다가 안보였다가할 수 있다.!!

아래 패턴은 기초니까 외워두시게

//먼저 중괄호 열고 
{
변경 === true
? 함수실행()
: null 
}

---

함수 컴포넌트 작성법

보통 HTML 파일처럼 생김

함수로 만들어야함
이게 하나의 컴포넌트임

app이라는 컴포넌트가 생성 되었고

그 함수가 있으면 당연히 출력하는 화면은 리턴문에 작성해주면됨

주의사항
1. 리턴문 안에는 () 소괄호로 열고 닫아야함.
2. 시작하는 태그가 있어야함

<div></div>

혹은 
<></>
  이런 빈태그라도 넣어줘야함 

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      내용
    </div>
  );
}

export default App;

app.js 파일을 열어보면 이렇게 나옴

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

hook

리액트 특3 hook

HOOK 단어에서 부터 기운이 오지 않는가..

확 뭔가 잡아 떙긴다는 느낌... 낚시 루어에 달린 갈고리

중간에 동기적으로 작동하는 자바스크립트는 비동기는 안된다.
즉, 코딩순서대로만 작동하게 되어 있다.

하지만....

뭐 복잡한 기능은 좀 뒤로 미뤄두었다가 작동을 하게 한다.
이것을 비동기적으로 작동한다......됐고..

상태에 기능을 부여할 수 있는거라고 쉽게 말하겠다.

진짜 여러종류가 있다.

사용방법을 차례대로 연재하겠음 ~~

사실 hook자유자재로 사용하면 진짜 리액트 다 했음

기본 Hook

• useState
• useEffect
• useContext

추가 Hooks

• useReducer
• useCallback
• useMemo
• useRef
• useImperativeHandle
• useLayoutEffect
• useDebugValue

다음엔 useState으로 돌아올께요