TIL - 220922

연주·2022년 9월 25일

KDT-TIL

목록 보기

13/36

22.09.22 목요일

리액트

📝 JSX 문법

✏️AND 연산자(&&)를 사용한 조건부 렌더링

조건을 만족하지 않으면, 아무것도 랜더링하지않는다. --> null값을 준다

function App() {
  const name = '리액트';
  return (
    <>
      {name === '리액트' ? <h1>리액트입니다.</h1> : null}
    </>
  );
}

&&연산자를 사용해서 조건부 랜더링을 한다.
위에 코드와 같은 의미

function App() {
  const name = '리액트';
  return (
    <>
      {name === '리액트' ? <h1>리액트입니다.</h1>}
    </>
  );
}

주의! 리액트 특성
falsy한 값인 0은 예외적으로 화면에 나타난다.

function App() {
  const name = '리액트';
  const number = 0; // 0
  return (
    <>
      {name === '리액트' && <h1>리액트입니다.</h1>}
      {number && <div>내용</div>}
    </>
  );
}

number = 1 : 내용
number = false : ' '
number = true : 내용

💬 왜 0이 나오지 라는 생각을 했는데,
1이 true이고, 0이 false이기때문에
0을 할당한 것은 false 이기때문에 빈칸이 나와야하지만,
리액트 특성상, 0은 0 그대로 출력 이라는 의미 같다.

✏️ 인라인 스타일링

: 카멜표기법으로 작성해야한다.

import './App.css';

function App() {
  // const name = '리액트';
  // const style = {
  //   backgroundColor: 'black',
  //   color: 'aqua',
  //   fontSize: '48px',
  //   fontWeight: 'bold',
  //   padding: 16,
  // };
  // return <div style={style}>{name}</div>
  
  ---위아래 같은 결과값 표현만 다르다---
  
  return <div style={{
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: '48px',
    fontWeight: 'bold',
    padding: 16,}}>{name}</div>;
}

export default App;

✏️ class 대신 className

// App.css

.react {
  background: aqua;
  color: black;
  font-size: 48px;
  font-weight: bold;
  padding: 16;
}


// App.js

import './App.css';
function App() {
  const name = '리액트';
    return <div className='react'>{name}</div>;
}
export default App;

기존에는 class = "클래스이름" 이였다면,
리액트에서는 className = "클래스이름" 이다.

✏️꼭 닫아야 하는 태그

HTML에서는 열고 닫지 않아도 되는 태그가 있었다.
ex) <br> , <input>
JSX는 열었으면 무조건 닫아야한다.
ex) <input />
-->self-closing태그

주석
{/* 리액트 주석은 이렇게 작성 */}

📝 함수형 컴포넌트

✏️생성 및 모듈화

// App.js

import './App.css';
import MyComponent from '../Components/MyComponent.js';

function App() {
  return (
    <>
      <MyComponent></MyComponent>
    </>
  );
}

export default App;

// MyCoponent.js
const MyComponent = () => {
  return (
    <>
      <h1>My Component</h1>
    </>
  );
};

export default MyComponent;

✏️props

props : properties
: 컴포넌트 속성을 설정할 때 사용하는 요소

-컴포넌트 사용할 때, props 값 지정
props는 읽기전용, 컴포넌트끼리 값을 전달하는 방법
부모 컴포넌트에서 설정할 수있음

1.컴포넌트를 사용할 때 props값 지정

// App.js
function App() {
  return (
    <>
      <MyComponent name='기본이름'></MyComponent>
    </>
  );
}

// MyComponent.js
function MyComponent(props) {
  console.log(props);
  // {name : "기본이름" }
  return (
    <>
      <h1>안녕하세요. 저는 {props.name}입니다.</h1>
    </>
  );
}

export default MyComponent;

2. props 기본값 설정: defaultProps
// App.js
name값 지우고, Mycomponent.js에서 name 할당

function MyComponent(props) {
  console.log(props);
  // {name : "기본이름" }
  return (
    <>
      <h1>안녕하세요. 저는 {props.name}입니다.</h1>
    </>
  );
}

MyComponent.defaultProps = {
  name: '기본이름',
};
export default MyComponent;

3.태그 사이에 내용을 보여주는 children

// App.js
function App() {
  return (
    <>
      <MyComponent>리액트</MyComponent>
    </>
  );
}

// MyComponent.js
function MyComponent(props) {
  console.log(props);
  // {name : "기본이름" }
  return (
    <>
      <h1>안녕하세요. 저는 {props.name}입니다.</h1>
      <p>children값은 {props.children} 입니다.</p>
    </>
  );
}

MyComponent.defaultProps = {
  name: '기본이름',
};
export default MyComponent;

4. ⭐비구조화 할당 문법을 통해 props 내부 값 추출⭐

function MyComponent({ name, children }) {
  return (
    <>
      <h1>안녕하세요. 저는 {name}입니다.</h1>
      <p>children값은 {children} 입니다.</p>
    </>
  );
}

MyComponent.defaultProps = {
  name: '기본이름',
};
export default MyComponent;

코드가 짧아진다.
이 방법으로, props를 사용하도록 한다.

5.propTypes를 통한 props 검증

import PropTypes from 'prop-types';
// import로 불러와야한다

MyComponent.propTypes = {
  name: PropTypes.string,
};
// propType지정
// name 값이 무조건 string(문자열)형태로 전달해야 된다.
// 숫자 값이 들어가면 콘솔에 경고메세지가 뜬다

📝 state

state : 컴포넌트 내부에서 바뀔 수 있는 값

useState 사용

// Say.js
import { useState } from 'react';

const Say = () => {
  const [message, setMessage] = useState('');
  const onClickEnter = () => setMessage('안녕하세요!');
  const onClickLeave = () => setMessage('안녕히 가세요!');

  return (
    <>
      <button onClick={onClickEnter}>입장</button>
      <button onClick={onClickLeave}>퇴장</button>
      <h1>{message}</h1>
    </>
  );
};

export default Say;

한 컴포넌트에서 useState 여러 번 사용

import { useState } from 'react';

const Say = () => {
  const [message, setMessage] = useState('');
  const onClickEnter = () => setMessage('안녕하세요!');
  const onClickLeave = () => setMessage('안녕히 가세요!');

  const [color, setColor] = useState('black');

  return (
    <>
      <button onClick={onClickEnter}>입장</button>
      <button onClick={onClickLeave}>퇴장</button>
      <h1 style={{ color }}>{message}</h1>
      <button style={{ color: ' red' }} onClick={() => setColor('red')}>
        빨간색
      </button>
      <button style={{ color: 'green' }} onClick={() => setColor('green')}>
        초록색
      </button>
      <button style={{ color: 'blue' }} onClick={() => setColor('blue')}>
        파란색
      </button>
    </>
  );
};

혼자 연습해보기

import { useState } from 'react';
// useState를 사용하겠다

function Like() {
  // Like 컴포넌트 선언
  const [heart, setHeart] = useState(['']);
  // useState에는 일단 빈칸을 할당
  // heart는 현재 상태, setHeart는 상태를 바꾸어주는 함수
  const clickLike = () => setHeart('🧡');
  // clickLike 함수는 heart의 값을 '🧡'로 바꿔준다
  const clickBad = () => setHeart('❌');
  // clickLike 함수는 heart의 값을 '❌'로 바꿔준다
  return (
    // 컴포넌트의 출력값
    // h1태그안에 heart값을 입력
    // 맨 윗 줄에 heart갑은 빈칸이지만,
    // 좋아요 버튼을 누르면 clickLike함수가 실행되서 heart의 값이 변한다.
    // 싫어요 버튼을 누르면 clickBad함수가 실행되서 heart의 값이 변한다.
    <>
      <h1>{heart}</h1>
      <button onClick={clickLike}>좋아요👍</button>
      <button onClick={clickBad}>싫어요😂</button>
    </>
  );
}

export default Like;

📝이벤트

onchange

  return (
    <>
      <h1>이벤트 연습</h1>
      <input
        type='text'
        name='message'
        placeholder='아무거나 입력해보세요'
        onChange={(e) => {
          console.log(e.target.value);
          // input으로 받는 값
        }}
      ></input>
    </>
  );
}

state에 input 값 담기

import { useState } from 'react';
// useState를 사용하겠다.
function EventPractice() {
  // EventPractice라는 컴포넌트 선언
  const [text, setText] = useState('');
  // text에 일단 빈칸을 선언, setText로 상태를 변화시킬예정
  const clickEvent = () => {
    alert(text);
  };
  // clickEvent라는 함수선언
  // 알림창에 text를 보여주겠다.
  return (
    <>
      <h1>이벤트 연습</h1>
      <input
        value={text}
        onChange={(e) => {
          setText(e.target.value);
          // console.log(e.target.value);
        }}
      ></input>
      <button onClick={clickEvent}>확인</button>
    </>
  );
}
// input 를 text로 할당, 지금 text는 할당된 값이 없다.
// e.target.value라는 값은 input부분이라는 걸 알수있었다.
// onChnage 이벤트로 e.target.value라는text의 값의 상태를 변경해주었다.
// e.target.value 값을 text에 할당
// 확인버튼을 누르면 알림창에 text값이 나오게 했다.

export default EventPractice;