[React] 문법들

state->props

import React from 'react';

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: 'Hello, World!'
    };
  }

  render() {
    return (
      <div>
        <ChildComponent message={this.state.message} />
      </div>
    );
  }
}

class ChildComponent extends React.Component {
  render() {
    return (
      <div>
        <h2>{this.props.message}</h2>
      </div>
    );
  }
}

export default ParentComponent;

call back -> props

콜백함수의 목적은 부모컴포넌트의 state를 변경하기 위함이다.

import React from 'react';

class ParentComponent extends React.Component {
  handleClick = () => {
    console.log('Button clicked in ParentComponent');
  }

  render() {
    return (
      <div>
        <ChildComponent onClick={this.handleClick} />
      </div>
    );
  }
}

class ChildComponent extends React.Component {
  render() {
    return (
      <div>
        <button onClick={this.props.onClick}>Click me</button>
      </div>
    );
  }
}

export default ParentComponent;

use effect

useEffect 함수는 컴포넌트가 렌더링 될 때 마다 특정 작업을 수행 할 수 있도록 하는 Hook이다.

기본형태: useEffect(function, deps)

• function: 수행하고자 하는 작업
• deps: 배열형태이며, 배열안에는 검사하고자 하는 값 또는 빈 배열

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

const DataFetchingExample = () => {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        // 데이터 가져오기 API 호출
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        setData(result);
        setIsLoading(false);
      } catch (error) {
        setError(error);
        setIsLoading(false);
      }
    };

    fetchData();
  }, []);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      <h2>Data:</h2>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default DataFetchingExample;

form

기본동작이 submit이고 button onclick이벤트에 의하여 호출된다.

import React from "react";
import { useState } from "react";

export default function Form() {
  const [formData, setFormData] = useState({
    firstName: "dldi",
    LastName: "",
    email: "",
    comments: "",
    isFriendly: true,
    employment: ""
  });
  //인풋 두개 더 만들어서 lastName이랑 email받기
  //state값 잘 바뀌도록 만들기
  function handleChange(event) {
    const { name, value, type, checked } = event.target;
    setFormData((prev) => {
      return {
        ...prev,
        [name]: type === "checked" ? checked : value // [named]: checked
      };
    });
  }

  function handleSubmit(event) {
    event.preventDefalut();
    //submitToApi 여기서 백엔드친구와 잘 얘기해보기
    console.log(formData);
  }

  console.log(formData);
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="First Name"
        onChange={handleChange}
        name="firstName"
        vlaue={formData.firstName}
      />
      <input
        type="text"
        placeholder="Last Name"
        onChange={handleChange}
        name="lastName"
        value={formData.LastName}
      />
      <input
        type="text"
        placeholder="Email"
        onChange={handleChange}
        name="email"
        vlaue={formData.email}
      />
      <textarea
        vlue={formData.comments}
        placeholder="Comments"
        onChange={handleChange}
        name="comments"
      />
      <input
        type="checkbox"
        id="isFriendly"
        checked={formData.isFriendly}
        onChange={handleChange}
        name="isFriendly"
      />
      <label htmlFor="isFriendly">Are you Friendly?</label>
      <br />
      <br />
      <fieldset>
        <legend>Current employment status</legend>
        <input
          type="radio"
          name="employment"
          id="unemployment"
          value="unemployed"
          checked={formData.employment === "unemployed"}
          onChange={handleChange}
        />
        <label htmlFor="unemployed">Unemployed</label>
        <input
          type="radio"
          name="employment"
          id="part-time"
          value="part-time"
          checked={formData.employment === "part-time"}
          onChange={handleChange}
        />
        <label htmlFor="unemployed">part-time</label>
        <input
          type="radio"
          name="employment"
          id="full-time"
          value="full-time"
          checked={formData.employment === "full-time"}
          onChange={handleChange}
        />
        <label htmlFor="unemployed">full-time</label>
        <br />
        <label htmlFor="favColor">What is your favorite color?</label>

        <select
          id="favColor"
          name="favColor"
          value={formData.favColor}
          onChange={handleChange}
        >
          <option value=""> -- Choose -- </option>
          <option value="red"> Red </option>
          <option value="orange"> Orange </option>
          <option value="yellow"> Yellow </option>
          <option value="green"> Green </option>
        </select>
        <br />
        <br />
        <button>Submit</button>
      </fieldset>
    </form>
  );
}

//state를 만든다.
//인풋의 값이 바뀌면  onChange
//state값을 그 인풋 값으로 바꾼다

//input을 하나 더 만들어서 Last Name받기
//state를 Object형으로 만들어서 FirstName, LastName
//값 저장하고 변경시키기

//textarea // name:comments
//input // checkbox // id=isFriendly
//state 감지를 해야한다. //value X checked //true
//handleChange 함수가 불대수도 작동하게 고쳐야한다

조건부렌더링

삼항연산자

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );
}

&&

render() {
  const count = 0;
  return (
    <div>
      {count && <h1>Messages: {count}</h1>}
    </div>
  );
}