[리액트문서보기] Quick Start

[참고]

https://react-ko.dev/learn

 

◼ 컴포넌트 생성 및 중첩하기 

function MyButton() {
  return (
    <button>
      Im a button
    </button>
  );
}

export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}

 

• React 컴포넌트 이름은 항상 대문자로 시작해야 하고 HTML 태그는 소문자로 시작해야 합니다.
• export , export default 키워드로 외부에서 사용할수 있게 component 지정

 

 

---

 

◼ JSX로 마크업 작성 하기 

JSX는 HTML보다 더 엄격합니다. <br />과 같은 모습으로 태그를 닫아야 합니다. 또한 컴포넌트는 여러 개의 JSX 태그를 반환할 수 없습니다. <div>...</div> 또는 빈 <>...</> 래퍼와 같이 하나의 공유 부모로 감싸야 합니다:

function AboutPage() {
  return (
    <> // 하나의 태그에 모든게 담겨야 한다.
      <h1>About</h1>
      <p>Hello there.<br />How do you do?</p>
    </>
  );
}

 

// + 참고

<Fragment></Fragment> : 축약해서 <></> 이렇게 사용 가능하다

function AboutPage() {
  return (
 	<div>
    // {arr.map(data => <key={data}>{data}<>} <key={키값}>을 주고싶을때.
    {arr.map(data => <Fragment key={data}>{data}<Fragment>} //Fragmen 써주고 key사용
    </div>
  );
}

 

 

JSX태그를 하나로 감싸줘야 하는 이유

JSX는 HTML처럼 보이지만 내부적으로는 일반 JavaScript 객체로 변환됩니다. 하나의 배열로 감싸지 않은 하나의 함수에서는 두 개의 객체를 반환할 수 없습니다. 따라서 또 다른 태그나 Fragment로 감싸지 않으면 두 개의 JSX 태그를 반환할 수 없습니다.

 

---

 

◼ 스타일 추가하기 

Class

<style>
    .avatar { 
      border-radius: 50%;
    }
</style>

//html
<img class="avatar" />

// jsx - className으로 CSS 클래스를 지정합니다.
<img className="avatar" />

 

 

인라인 스타일

 // html
 <div style="font-size:20;background-color:red;">
  html 스타일
 </div>
 
 // JSX - {{}} 안에 작정
 // '-'로 나눠진 문법은 카멜케이스로 작성
 <div style={{fontSize:20;backgroundColor:red;}}>
  JSX 스타일
 </div>

 

---

 

 

◼ 데이터 표시하기 

중괄호를 사용하면 코드에서 일부 변수를 삽입하여 사용자에게 표시할 수 있도록 JavaScript로 빠져 나간다고( escape back )할 수 있습니다.

즉, JSX문법이로 적혀있는 마크업에 {}중괄호를 만나면  중괄호 내에서는 JavaScript로 돌아가서 작업을 합니다.

const user = {
  name: 'Hedy Lamarr',
  imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
  imageSize: 90,
};

export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1> // Hedy Lamarr
      <img
        className="avatar"
        src={user.imageUrl}
        alt={'Photo of ' + user.name}
        style={{
          width: user.imageSize,
          height: user.imageSize
        }}
      />
    </>
  );
}

 

 

---

 

 

 

◼ 조건부 렌더링 

if문, 삼항연산자, and, or 연산자를 사용하여 component을 보여주고 안보여 줄수 있다.

 

IF문

import Profile from './Profile'

const name1 = 'tome';
const name2 = 'same';

// if문
export function Profile() { 
  return (
    <>
    if(name === 'same'){
    	<Profile name='name2' />
    } else {
    	<Profile name='name1' />
    }
    </>
  );
}


// return 자체가 조건식이 가능하다
export function Profile() { 
if(name === 'same') return (<Profile name='name2' /> );
  return 123
}

 

삼항연산자

import Profile from './Profile'

const name1 = 'tome';
const name2 = 'same';

export default function Profile() { 
  return (
    {name === 'same' ? <Profile name='name2' /> : <Profile name='name1' /> }
  );
}

 

And , OR연산자

import Profile from './Profile'

const name1 = 'tome';
const name2 = 'same';

export default function Profile() { 
  return (
    {name === 'same' && <Profile name='name2' /> }
  );
}

 

 

 

---

 

 

◼ 목록 렌더링 

반복적인 리스트를 화면에 태그와 같이 값을 입력하고 싶을때 사용합니다.

const products = [ // 배열
  { title: 'Cabbage', id: 1 },
  { title: 'Garlic', id: 2 },
  { title: 'Apple', id: 3 },
];


return (
  <ul>
  // map() 함수를 사용하여 상품 배열을 <li> 항목 배열로 변환
  {products.map(product => (
      <li key={product.id}> //
      	{product.title}
      </li>
    )
  );}
  </ul>
);

 

key 속성이 있는 것을 주목하세요.

목록의 각 항목에 대해, 형제 항목 중에서 해당 항목을 고유하게 식별하는 문자열 또는 숫자를 전달해야 합니다. 일반적으로 키는 데이터베이스 ID와 같은 데이터에서 가져와야 합니다. React는 나중에 항목을 삽입, 삭제 또는 재정렬할 때 어떤 일이 일어났는지 이해하기 위해 키를 사용합니다

 

 

---

 

 

◼ 이벤트 응답하기 

태그에 이벤트 연결하는 방법입니다.

function MyButton() {
  function handleClick() {
    alert('You clicked me!');
  }

  return (
  // handleClick() 괄호 없어야 합니다
    <button onClick={handleClick}> 
      Click me
    </button>
  );
}

 

handleClick() 괄호 없어야 합니다.

괄호가 있으면 랜딩 되자마자 실행됩니다. 괄호를 넣은 상태로 onClick에 연결하면,

함수를 넣어서 클릭때마다 실행되게 하는게 아닌, 실행된 값을 onClick에 연결한 것라 화면을 로드했을 시

클릭하지 않았는데 실행된 alert 창을 보게 됩니다.

 

 

 

---

 

 

◼ 화면 업데이트하기 

[참고]

https://night-owl-zz.tistory.com/47

[리액트] useState

 

 

 

 

 

◼ Hook 사용하기 

Hook의 종류는 만들어 진것도 많지만 , 스스로 만들수도 있습니다.

대략적인 종류는 [참고]를 봐주세요!

훅은 일반 함수보다 더 제한적입니다. 컴포넌트(또는 다른 훅)의 최상위 레벨 에서만 훅을 호출할 수 있습니다. 조건문이나 반복문에서 useState 를 사용하고 싶다면, 대신 새로운 컴포넌트를 추출하고 그 컴포넌트에 작성하세요.

 

import { useState, useEffect, useId } from 'react';

function MyButton() {
  const [count, setCount] = useState(0);
  useId(); // hook 사용가능!
  
  function handleClick() {
    setCount(count + 1);
    useId(); // hook 에러 최상위가 아니기에
  }
  
  useEffect(()=>{
  	useId(); // hook 에러 최상위가 아니기에
  },[])

  return (
    <button onClick={handleClick}>
      Clicked {count} times
    </button>
  );
}

 

 

[참고]

https://night-owl-zz.tistory.com/46

[리액트기초] Hook

 

 

---

 

 

◼ 컴포넌트간의 데이터 공유하기 

자체 이벤트 가져서 사용하기

아래 코드는 버튼 component를 만들어 App.js 각각 MyButton 4개의 버튼을 만들어 주었습니다.

이 코드는 각각의 버튼을 클릭시 클릭한 버튼만이 숫자가 증가 합니다.

 

 

export default function MyButton() { //button
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
     <button onClick={handleClick}>{count}</button>
    </div>
  );
}

function MyApp() { // view
  return (
    <div>
      <h1>Counters that update separately</h1>
      <MyButton />
      <MyButton />
    </div>
  );
}

 

 

 

 

하지만! 

하나만이 아니라 여러개가 같이 증가하길 원한다면?!

 

 

 

부모에게 이벤트 받아서 사용하기

리액트는 단방향 이기에 위에서 아래로 값을 전달합니다.
“state 끌어올리기”라고 해서, state를 부모에게 끌어올리면 컴포넌트 간에 공유할 수 있게 해줍니다.

 

 

export default function MyButton({ count, onClick }) {
  return (
    <button onClick={onClick}>
      Clicked {count} times
    </button>
  );
}

function MyApp() {
  const [count, setCount] = useState(0); // 위치이동

  function handleClick() { // 위치이동
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Counters that update together</h1>
      <MyButton count={count} onClick={handleClick} /> // props 전달
      <MyButton count={count} onClick={handleClick} /> // props 전달
    </div>
  );
}