22.9.30

커피 내리는 그냥 사람·2022년 9월 30일

항해99

목록 보기

21/108

실습 : Counter 만들기

import React, { useState } from "react";
// useState 일단 import


//Counter 컴포넌트 먼저 만들어줌
const Counter = () => {
  const [count, setCount] = useState(0)
  // useState 이용, 초기값 지정

  const onIncrease = () => {
    setCount(prevCount => prevCount + 1)
  };
  const onDecrease = () => {
    setCount(prevCount => prevCount - 1)
  }
  
  // increase, decrease 하는 변수 지정하여 setCount
  return(
    <>
    <h1>{count}</h1>
    // count 변수 받아서 넣음
    <button onClick={onIncrease}>+1</button>
    <button onClick={onDecrease}>-1</button>
		//  onClick때마다 이벤트 발생
    </>
  )
}

// return하는 App 컴포넌트
const App = () => {
  return <Counter />
    // Counter 내용 받음
}

export default App;

멘토님 추천 공부 사항

1. Array 는 무엇이고 어떻게 쓰는지?

(MDN) 배열은 리스트와 비슷한 객체로서 순회와 변형 작업을 수행하는 메서드를 갖습니다.
순서가 있다.
주로 다양한 메서드와 함께 사용되며 인덱스로 요소에 접근할 수 있다.
배열을 새로운 변수에 할당해도 배열이 복사되지는 않습니다. 새로운 변수에는 원본 배열을 가리키는 참조만 할당되며, 원본 배열의 값을 바꾸면 새 변수에서도 그 변경점이 반영됩니다.

array는 메서드, 프로퍼티에 따라 다양하게 사용이 가능하므로 그 때 그 때 찾아두면서 공부하는 것이 좋을 것 같다.

2. Object 는 무엇이고 어떻게 쓰는지?

(MDN)Object 클래스는 JavaScript의 데이터 유형 중 하나를 나타냅니다. 다양한 키 모음 및 더 복잡한 엔티티들을 저장하는 데 사용됩니다. 객체는 Object() 생성자 또는 객체 초기자 / 리터럴 구문를 통해 생성할 수 있습니다.
key 와 value로 이뤄져 있다. array와 달리 순서는 따로 없다.
= 마찬가지로 다양한 속성과 메서드를 사용해서 쓴다.

3. forEach, map, filter 함수는 무엇이고 어떻게 쓰는지?

forEach :

기존 for 반복문과는 약간 다르게 순회한다.
= 배열의 각 요소에 적용하게 될 "콜백함수"를 전달
리턴값이 undefined다

const numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(number) {
    console.log(number);
});

or

numbers.forEach(number => console.log(number));

// 1
// 2
// 3
// 4
// 5

numbers.forEach((number, index) => {
    console.log('Index: ' + index + ' Value: ' + number);
});
// Index: 0 Value: 1
// Index: 1 Value: 2
// Index: 2 Value: 3
// Index: 3 Value: 4
// Index: 4 Value: 5

numbers.forEach((number, index, array) => {
    console.log(array);
});
// (5) [1,2,3,4,5]
// (5) [1,2,3,4,5]
// (5) [1,2,3,4,5]
// (5) [1,2,3,4,5]
// (5) [1,2,3,4,5]

단순히 자료를 돌려서 가져오는 것이 아니라 가공할 수 있다.

map :

배열의 모든 요소들의 값을 변경해 새로운 배열을 만들어야할 떄 => array.map()

let arr = [3, 4, 5, 6];
let modifiedArr = arr.map(function(element){
    return element *3;
});

console.log(modifiedArr); // [9, 12, 15, 18]

filter :

array를 걸러주는 메소드

const numbers = [1, 2, 3, 4, 5];
const result = numbers.filter(number => number > 3);

console.log(numbers);
// [1, 2, 3, 4, 5];

console.log(result);
// [4, 5]

알고리즘 때 중복제거 하면서 많이 사용했다. 그렇게 응용해보면 될 것 같다.

to-do list 계속 붙여넣기

기술멘토님이 봐주신거에서 좀 수정을 가했다. 안 그러면 도저히 진전이 없어서.. 구글링 좀 활용했다. 일단 이해한데로 해석한다.

// src/App.js
import React, {useState} from 'react'
import "./App.css"; 

function App() {
  const [inputValue, setInputValue] = useState("")
  // 입력되는 값은 그대로 ""로 간다.
  const [todos, setTodo] = useState([])
  // 빈 리스트를 하나 잡고

  const onChange = e => {
    setInputValue(e.target.value)
  };
  // 입력되는 값 받는 변수

  const onCreate = e =>{
    setTodo(todos => [...todos, inputValue]);
    setInputValue('')
  }
  // 전개 연산자 사용한 입력되는 값 array에 담기
  
  return (
    <div>
        <h1>나의 할 일</h1>
        <input type="text" value={inputValue} onChange={onChange}/>

        <button type="button" onClick={onCreate}>입력</button>
        <div>할 일 내용
        <ul>
          {todos.map(ent => (<li key={ent}>{ent}</li>))}
// 이 쪽에서 대대적인 수정함. 코드를 더 간단하게 해서 받을 값만 받음.
        </ul>
        </div>
    </div>
  );
}

export default App;!