반응 개념 2 배우기

이것은 첫 번째 Learn React Concept의 연속입니다. 첫 번째 것을 보려면 확인하십시오.

🎯 다룰 개념

📋 논리 && 연산자를 사용한 조건부 렌더링
📋 React 컴포넌트 스타일 지정
📋 양식 처리
📋 API에서 데이터 가져오기
📋 서버에 요청 보내기

조건부 렌더링

지난 튜토리얼에서는 조건부 렌더링에 삼항 연산자를 사용했습니다. 다음은 && 연산자를 사용하는 동일한 논리입니다.

App.js에서

import './App.css';
import { Gender } from './components/Gender';

function App() {
  return (
    <div className="App">
      <Gender />
    </div>
  );
}
export default App;

결과는 다음과 같습니다.

isMale이 true이면 && 다음의 표현식이 렌더링됩니다.

반응 구성 요소 스타일 지정

스타일링을 통해 응용 프로그램을 아름답게 할 수 있습니다.
구성 요소 폴더에 Style.css 및 Styling.js라는 파일을 만듭니다.
Styles.css

.main {
    color: rgb(42, 187, 28);
    background-color: black;
}

Styling.js

import './Styles.css';
export const Styling = () => {
  return (
    <div>
      <h1 className="main">Learn style sheet</h1>
    </div>
  );
};

App.js

import './App.css';
import { Styling } from './components/Styling';

function App() {
  return (
    <div className="App">
      <Styling />
    </div>
  );
}
export default App;

결과는 다음과 같습니다.

인라인 스타일

스타일링의 또 다른 방법은 인라인 방법입니다. 인라인 스타일은 단일 요소에 고유한 스타일을 적용하는 데 사용할 수 있습니다.

App.js에서

import './App.css';
import { Inline } from './components/Inline';

function App() {
  return (
    <div className="App">
      <Inline />
    </div>
  );
}
export default App;

결과는 다음과 같습니다.

CSS 모듈

모든 클래스 이름과 애니메이션 이름이 기본적으로 로컬 범위로 지정되는 CSS 파일입니다.


App.js에서

import './App.css';
import { Module } from './components/Module';

function App() {
  return (
    <div className="App">
      <Module />
    </div>
  );
}
export default App;

결과:

양식 처리

양식 처리는 데이터가 값을 변경하거나 제출될 때 데이터를 처리하는 방법에 관한 것입니다.Form.js

import { useState } from 'react';

export const Form = () => {
  const [username, setUsername] = useState('');
  console.log(username);

  const handleSubmit = (event) => {
    event.preventDefault(); // prevent page refresh
    alert(`Hello, welcome ${username}`);
  };
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Username</label>
        <input
          type="text"
          value={username}
          onChange={(event) => setUsername(event.target.value)}
        />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};

App.js

import './App.css';
import { Form } from './Form';

function App() {
  return (
    <div className="App">
      <Form />
    </div>
  );
}
export default App;

결과:

API에서 데이터 가져오기

_ Fetch API를 사용하면 리소스를 비동기적으로 요청할 수 있습니다. fetch() 메서드를 사용하여 Response 객체로 확인되는 약속을 반환합니다. 실제 데이터를 얻으려면 Response 객체의 메서드 중 하나를 호출합니다.Fetch.js에서

    import { useState, useEffect } from 'react';
    export const Fetch = () => {
    const [products, setProducts] = useState([]);

    useEffect(() => {
        fetch('https://fakestoreapi.com/products')
        .then((response) => response.json())
        .then((data) => setProducts(data))
        .catch((error) => console.log(error));
    }, []);
    return (
        <div>
        <h1>Products</h1>
        <ul>
            {products.map((product) => (
            <li key={product.id}>
                Title: {product.title}, Price:{product.price}, Rate: {product.rate}
            </li>
            ))}
        </ul>
        </div>
    );
    };

import './App.css';
import { Fetch } from './components/Fetch';

function App() {
  return (
    <div className="App">
      <Fetch />
    </div>
  );
}
export default App;

결과:

서버에 요청 보내기

이제 get 요청을 수행했으므로 서버에 데이터를 전송하여 Post 요청을 수행하는 방법을 살펴보겠습니다.
Post.js

import { useState } from 'react';

export const PostForm = () => {
  const [image, setImage] = useState('');
  const [category, setCategory] = useState('');
  const [title, setTitle] = useState('');
  const [price, setPrice] = useState('');
  const [description, setDescription] = useState('');

  const submitHandler = (event) => {
    event.preventDefault();
    fetch('https://fakestoreapi.com/products', {
      method: 'POST',
      body: JSON.stringify({
        title: title,
        price: price,
        description: description,
        image: image,
        category: category,
      }),
      headers: {
        'Content-type': 'application/json; charset=UTF-8',
      },
    })
      .then((response) => response.json())
      .then((json) => console.log(json));
  };
  return (
    <form onSubmit={submitHandler}>
      <div>
        <input
          type="text"
          name="description"
          placeholder="Description"
          value={description}
          onChange={(e) => setDescription(e.target.value)}
        />
      </div>
      <div>
        <input
          type="text"
          name="title"
          placeholder="Title"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
        />
      </div>
      <div>
        <input
          type="text"
          name="price"
          placeholder="Price"
          value={price}
          onChange={(e) => setPrice(e.target.value)}
        />
      </div>
      <div>
        <input
          type="text"
          name="category"
          placeholder="Category"
          value={category}
          onChange={(e) => setCategory(e.target.value)}
        />
      </div>
      <div>
        <input
          type="text"
          name="image"
          placeholder="Image"
          value={image}
          onChange={(e) => setImage(e.target.value)}
        />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};

App.js에서

import './App.css';
import { PostForm } from './components/Post';

function App() {
  return (
    <div className="App">
      <PostForm />
    </div>
  );
}
export default App;

결과:

결론

이 희망이 React 작업에 도움이 되었기를 바랍니다. 다음 포스트에서는 이 모든 개념을 모아서 앱을 만들 것입니다.
읽어 주셔서 감사합니다.

자원

Fake Store