천소희

기록하는 개발자

업데이트:

카테고리:

/

태그: , , ,

클래스형 컴포넌트

import React, {Component} from "react";

// 리액트에서 사용하는 컴포넌트를 사용하기 위해 상속
export default class App extends Component {
  render() {
		// 해당 UI 작성
    return(
      <div>
        안녕하세요
      </div>
    )
  }
}

함수형 컴포넌트

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

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

⇒ render를 작성할 필요가 없다
⇒ 클래스 작성은 class x className

css 적용

  1. 해당 앱과 같은 이름에 css 파일에서 작성한다.

    // 앱 상단에 import를 해줘야한다.
import "./App.css"

  2. 클래스 안에서 작성

     export default class App extends Component {
    
   btnStyle = {
     color: "#fff",
     border: "none",
     padding: "5px 9px",
     borderRadius: "50%",
     cursor: "pointer",
     float: "right"
   };
    	
 	// 속성을 부여
 	<button style={this.btnStyle}>x</button>
 }

  3. 함수로 정의

     getStyle = () => {
     return {
       padding: "10px",
       borderBottom: "1px #ccc dotted"
     }
   }
    
 // 태그 안에서 스타일에 적용
 <div style={this.getStyle()}>

Map 메소드

map 함수는 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.

todoData = [
    {
      id: "1",
      title: "공부하기",
      completed: true,
    },
    {
      id: "2",
      title: "청소하기",
      completed: false,
    },
  ]

// map을 이용해 해당 데이터를 나열한다.
{this.todoData.map(data => (
	// 유니크한 key가 필요하다.
  <div style={this.getStyle()} key={data.id}>
    <input type="checkbox" defaultChecked={false}/>
    {data.title}
    <button style={this.btnStyle}>x</button>
  </div>
))}

Key

  • React가 변경, 추가, 제거된 항목을 식별하는데 도움이 된다.
  • 가상돔을 이용하여 바뀐 부분만 변경하기 때문에 key를 이용하여 바뀐 요소를 인식할수 있다.

Filter 메소드

// 버튼 클릭시 해당 함수가 실행
<button style={this.btnStyle} onClick={() => this.handleClick(data.id)}>x</button>

handleClick = (id) => {
  let newTodoData = this.todoData.filter(data => data.id !== id)
  console.log('newTodoData', newTodoData)
};

React State

컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체, State가 변경되면 리렌더링이 실시

state = {
    todoData : [
      {
        id: "1",
        title: "공부하기",
        completed: true,
      },
      {
        id: "2",
        title: "청소하기",
        completed: false,
      },
    ],
    value : "",
  };

handleClick = (id) => {
    let newTodoData = this.todoData.filter(data => data.id !== id)
    this.setState({todoData: newTodoData})
  };

state 안에 변경을 원하는 데이터 입력 ⇒ 호출할때는 this.state.변수이름

this.setState({바꿀 state변수: 새 변수}) 로 변수 내용을 저장

할 일 목록 추가하기

// 입력이 들어올 떄마다 state 의 값을 변경한다
handleChange = (e) => {
  console.log(e.target.value)
  this.setState({ value: e.target.value})
}

// 제출하면 원래 있던 데이터 형식에 맞춰서 추가한다
handleSumbit = (e) => {
  e.preventDefault()

  let newTodo = {
    id: Date.now(),
    title: this.state.value,
    completed: false
  };
	
	// 원래 있던 데이터는 구조분해 할당으로 넣어준 뒤 마지막에 추가된 데이터 작성
  this.setState({todoData: [...this.state.todoData, newTodo] });
  this.setState({value: ""});
};

전개 연산자

특정 객체 또는 배열의 값을 다른 객체, 배열로 복제하거나 옮길 때 사용, ... 으로 사용

삼항 연산자

completed ? "line-through" : "none" => 조건 ? true일때 값 : false 일때 값

참고