[React] React 기초

React/STUDY

[React] React 기초

코맹 2024. 7. 1. 17:30

리액트 기초공부

1. html의 태그처럼 개발자가 새로운 요소(객체)를 생성할 수 있음

function CustomButton() {     // CustomButton 객체 생성
  return (
    <button>MyButton</button>
  )
}

CustomButton 객체 생성

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Hello, React.js!</h1>
        <CustomButton />
      </header>
    </div>
  );
}

객체 생성 후 App의 header안에 추가

2. /component/CustomButton.js 생성, 위 소스를 옮김

component 폴더 생성 > CustomButton.js 생성

CustomButton.js 코드

function CustomButton() {     // CustomButton 객체 생성
  return (
    <button>MyButton</button>
  )
}

export default CustomButton;    // 외부에서 사용하려면 필수!!

같은 파일이 아닌 곳에 객체를 만들면, 가져와 쓰기 위해서 export default 객체이름; 필수

App.js 코드

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


function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Hello, React.js!</h1>
        <CustomButton />
      </header>
    </div>
  );
}

export default App;

import CustomButton from './component/CustomButton'; 를 통해 CustomButton.js 파일 사용 가능

3. React 문법은 JSX, 일반 js와 조금 차이가 있음

<div className="App">

className은 JSX에만 존재
HTML에 있는 class는 JSX에서 className으로 변경
인라인으로 style 쓸 때 CSS 명칭이 다름
대신, *.css 파일로 작업할 때는 기존 그대로 사용해도 무방
JSX문법에는 모든 요소는 상위 태그 하나에 속해야 함
ex)

잘못된 예시

function CustomButton() {     // CustomButton 객체 생성
  return (
    <button>MyButton</button>
    <button>secondButton</button>
  )
}

export default CustomButton;    // 외부에서 사용하려면 필수!!

올바른 예시

function CustomButton() {     // CustomButton 객체 생성
  return (
    <>
    <button>MyButton</button>
    <button>secondButton</button>
    </>
  )
}

export default CustomButton;    // 외부에서 사용하려면 필수!!

4. 데이터 화면에 표시

App.js 코드

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

// 데이터 생성시 보통 const
const ironMan = {
  name: 'Tony Stark',
  heroName: 'Iron-man',
  imgUrl: 'https://img.danawa.com/prod_img/500000/207/533/img/18533207_1.jpg?_v=20221226163359',
  imgSize: 100,
}

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>{ironMan.heroName}</h1>
        <img className='profile'
             src={ironMan.imgUrl}
             alt={ironMan.name + '변신사진'}
             style={{
              width: ironMan.imgSize,
              height: ironMan.imgSize,
              borderRadius: '50%',
             }}
        />
        <CustomButton />
      </header>
    </div>
  );
}

export default App;

💥💥💥

css 적용시 jsx와 css 파일로 하는 것과 차이가 있다.

css를 *.css 파일에 작성할 때는 html에서 사용할 때와 동일
- ex. border-radius: 50%;
JSX에 사용할 때는 변경
- ex. borderRadius: '50%'

5. 조건부 렌더링

CustomButton.js 코드

function CustomButton() {     // CustomButton 객체 생성
  let isLoggedIn = true;
  let content;

  if(isLoggedIn) {
    content = <button>Log Out</button>;
  } else {
    content = <button>Log In</button>;
  }
  return (
    <>
      {content}    
    </>
  )
}

export default CustomButton;    // 외부에서 사용하려면 필수!!

CustomButton.js 코드 - 삼항연산자 사용

function CustomButton() {     // CustomButton 객체 생성
  let isLoggedIn = true;    // 로그인 여부
  let content;

  // if(isLoggedIn) {
  //   content = <button>Log Out</button>;
  // } else {
  //   content = <button>Log In</button>;
  // }
  return (
    <>
      {/* {content}     */}
      {
        isLoggedIn ? (
          <button>Log Out</button>
        ) : (
          <button>Log In</button>
        )
      }
    </>
  )
}

export default CustomButton;    // 외부에서 사용하려면 필수!!

isLoggedIn = true였기 때문에 Log Out 버튼이 나오는 것을 확인할 수 있음

6. 목록 표시
for, map() 함수를 많이 사용

App.js에 weapons 배열 생성

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

// 데이터 생성시 보통 const
const ironMan = {
  name: 'Tony Stark',
  heroName: 'Iron-man',
  imgUrl: 'https://cdn.pixabay.com/photo/2020/11/28/03/19/iron-man-5783522_640.png',
  imgSize: 100,
}

const weapons = [
  {title: 'Replusor Beam', idx: 1 },
  {title: 'Unibeam Blaster', idx: 2 },
  {title: 'Smart missile', idx: 3 },
];

const listWeapons = weapons.map(weapon => 
  <li key={weapon.idx}>
    {weapon.title}
  </li>
)

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>{ironMan.heroName}</h1>
        <img className='profile'
             src={ironMan.imgUrl}
             alt={ironMan.name + '변신사진'}
             style={{
              width: ironMan.imgSize,
              height: ironMan.imgSize,
              borderRadius: '50%',
             }}
        />
        <ul>
          {listWeapons}
        </ul>
        <CustomButton />
      </header>
    </div>
  );
}

export default App;

💥💥💥

const listWeapons = weapons.map(weapon => 
  <li>
    {weapon.title}
  </li>
)

key를 사용하지 않으면 경고 발생
각 child 요소마다 key 속성이 필요!

const listWeapons = weapons.map(weapon => 
  <li key={weapon.idx}>
    {weapon.title}
  </li>
)

7. 이벤트 핸들링

form + onSubmit, tag + onClick

function CustomButton() {     // CustomButton 객체 생성
  let isLoggedIn = true;    // 로그인 여부
  let content;

  function handleClick() {
    if(isLoggedIn) {
      alert("로그아웃 되었습니다'.");
    } else {
      alert("로그인 합니다.");
    }
  }

  return (
    <>
      {
        isLoggedIn ? (
          <button onClick={handleClick}>Log Out</button>
        ) : (
          <button onClick={handleClick}>Log In</button>
        )
      }
    </>
  )
}

export default CustomButton;    // 외부에서 사용하려면 필수!!

이벤트 파라미터 전달

function CustomButton() {     // CustomButton 객체 생성
  let isLoggedIn = true;    // 로그인 여부
  let content;

  function handleClick(name) {
    if(isLoggedIn) {
      alert(name + "이 로그아웃 되었습니다'.");
    } else {
      alert(name + "이 로그인 합니다.");
    }
  }
  
  return (
    <>
      {
        isLoggedIn ? (
          <button onClick={() => handleClick("아이언맨")}>Log Out</button>
        ) : (
          <button onClick={() => handleClick("아이언맨")}>Log In</button>
        )
      }
    </>
  )
}

export default CustomButton;    // 외부에서 사용하려면 필수!!

파라미터가 필요해서 함수뒤에 ()를 쓰면 이벤트 순서에 따라 리플레시 후 자동실행됨
- onClick={() => function()} 람다식으로 변경

8. 컴포넌트 간 데이터 전달
- props 속성
- props.속성이름.key 이름

App.js에 data 담기

<CustomButton data={ironMan} />

CustomButton.js에 props 사용

function CustomButton(props) {     // CustomButton 객체 생성
  let heroName = props.data.heroName;
  let isLoggedIn = true;    // 로그인 여부
  let content;

  console.log(heroName);

  function handleClick(name) {
    if(isLoggedIn) {
      alert(name + "이 로그아웃 되었습니다'.");
    } else {
      alert(name + "이 로그인 합니다.");
    }
  }

  return (
    <>
      {
        isLoggedIn ? (
          <button onClick={() => handleClick(heroName)}>Log Out</button>
        ) : (
          <button onClick={() => handleClick(heroName)}>Log In</button>
        )
      }
    </>
  )
}

export default CustomButton;    // 외부에서 사용하려면 필수!!

콘솔에 heroName 찍히는 것 확인

파라미터 값에 담아보낸 변수가 잘 전달된 것 확인할 수 있음

9. 화면 업데이트
- useState: 앱 화면의 상태를 기억하고, 사용하기 위함
- import { useState } from 'react'; 필수

App.js

import { useState } from 'react';

function IncButton() {
  const [count, setCount] = useState(0);    // count = 변수, setCount = 변수 값을 조정할 함수, useState(0) = 최초의 상태가 0으로 초기화

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

  return (
    <button onClick={upClick}>
      {count}번 증가
    </button>
  )
}

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>{ironMan.heroName}</h1>
        <img className='profile'
             src={ironMan.imgUrl}
             alt={ironMan.name + '변신사진'}
             style={{
              width: ironMan.imgSize,
              height: ironMan.imgSize,
             }}
        />
        <IncButton />
      </header>
    </div>
  );
}

const [count, setCount] = useState(0);
- count : 변수
- setCount : 변수값을 조정할 함수
- useState(0) : 최초 값을 0으로 초기화

10. Hooks
- use로 시작하는 함수를 Hooks라고 호칭. (State, Effect 외 잘 안씀)
- useState : React 컴포넌트 상태를 추가, 보관
- useEffect : 컴포넌트에서 사이드이펙트를 수행할 때
- 기타 : useContext, useReducer, useCallback, useRef, ...

import { useState } from 'react';

function IncButton() {
  const [count, setCount] = useState(0);    // count = 변수, setCount = 변수 값을 조정할 함수, useState(0) = 최초의 상태가 0으로 초기화

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

  return (
    <button onClick={upClick} count={count}>  
      {count}번 증가
    </button>
  )
}

export default IncButton;    // 외부에서 사용하려면 필수!!

<button onClick={upClick} count={count}>
- count : props
- {count} : const [count, setCount]의 count

IcnButton.js 변경

function IncButton({ count, onClick }) {    // 넘어오는 props와 handler 함수 전달 받음

  return (
    <button onClick={onClick}>
      {count}번 증가
    </button>
  )
}

export default IncButton;    // 외부에서 사용하려면 필수!!

App.js 변경

import logo from './logo.svg';
import './App.css';
import CustomButton from './component/CustomButton';
import { useState } from 'react';
import IncButton from './component/IncButton';


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

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

  return (
    <div className="App">
      <header className="App-header">
        
        <IncButton count={count} onClick={handleClick} />
        <IncButton count={count} onClick={handleClick}></IncButton>
        
      </header>
    </div>
  );
}

export default App;

'React > STUDY' 카테고리의 다른 글

[React] React 개발환경 및 기본구조 (0)	2024.07.01

현재글[React] React 기초

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

코맹이의 개발일지

[React] React 기초

'React > STUDY' 카테고리의 다른 글

'React/STUDY'의 다른글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

[React] React 기초

'React > STUDY' 카테고리의 다른 글

'React/STUDY'의 다른글

관련글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역