React.js 정리(1-12)

JS es6 문법

- let, const (var X) : 블록레벨 스코프
- 화살표함수 const func = (a) => { return a }
- 비구조화 할당 - const { a, b } = abc
- default parameter
- 템플릿 리터럴 ${foo}
"스트링" + abc + "입니다" `스트링${abc}입니다`
- import from , export default
- 펼침연산자 : [...arr], {...object} )
- Promise , async&await

 

REACT 기본 개념

- static page : html css js 파일만으로 이미 페이지가 완성된 웹페이지

- dynamic page : html 렌더링 후 서버와의 통신을 통해 내용이 변하면서 작용

- CSR(Client Side Rendering) : 최초 렌더링 후 브라우저의 JS를 통해 html을 완성(React의 방식)

- SSR(Server Side Rendering) : html 렌더링, 라우팅을 서버가 담당

 

REACT 반복문

1. 함수를 따로 빼서 if나 for문 사용하기

 

2. map, filter, reduce 사용하기

// map 사용하기 : 그냥 반복문, 새로운 배열이 반환
const numbers = [1,2,3,4,5];
const newNumbers = numbers.map((e) => {return (e+1)});
const newNumbers = numbers.map((e, i) => {return (e+1)});

// forEach 사용하기 : 그냥 실행, 반환 안함
numbers.forEach((e)=>{console.log(e)})

// filter 사용하기 : 조건이 true인것으로 배열 반환
numbers.filter((e)=>{e>3})

// reduce 사용하기 : 내부의 값이 누적됨다. 성분은 init과 cur 그리고 초기값 0이다.
const numbers = [1,2,3];
numbers.reduce((init, cur)=>{}, 0);

 

 

REACT HOOKS : 기본 변수/함수들

useState : 랜더링되는 변수

const [value, setValue] = useState(0);

useRef : 랜더링 안되는 변수

const inputRef = useRef(0);
inputRef.current = 10;

 

REACT 구현하기 : TO-DO List로 확인하기

import React, { useRef, useState } from "react";
import styled from "styled-components";

const Todo = () => {
  const [value, setValue] = useState("");
  const [todos, setTodos] = useState([
    { id: 1, text: "함해보자", checked: true },
  ]);
  const nextId = useRef(2);

  const changeValue = (e) => {
    setValue(e.target.value);
  };

  const handleAddTodo = (e) => {
    e.preventDefault();
    setTodos([...todos, { id: nextId, text: value, checked: "false" }]);
    nextId.current = nextId.current + 1;
  };

  return (
    <Container>
      <Title>일정관리</Title>
      <InputWrapper>
        <InputText
          value={value}
          placeholder="할 일을 입력해주세요"
          onChange={changeValue}
        />
        <BtnSubmit onClick={handleAddTodo}>+</BtnSubmit>
      </InputWrapper>
      <List>
        {todos.map((e, i) => (
          <Item key={i}>
            <label>
              <Checkbox
                type="checkbox"
                checked={() => {
                  return e.checked ? true : false;
                }}
              />
              <Content>{e.text}</Content>
            </label>
            <BtnDelete>X</BtnDelete>
          </Item>
        ))}
      </List>
    </Container>
  );
};

const Container = styled.div`
  // 1. 위치
  margin: 0 auto;
  margin-top: 6rem;
  // 2. 크기
  width: 512px;
  // 3. 꾸미기
  background-color: grey;
  border-radius: 5px;
  overflow: hidden;
`;
const Title = styled.div`
  // 1. 위치
  display: flex;
  justify-content: center;
  align-items: center;
  // 2. 크기
  height: 4rem;
  font-size: 1.5rem;
  font-family: sans-serif;
  color: white;
  // 3. 꾸미기
  background-color: #22b8cf;
`;

const InputWrapper = styled.div`
  //1. 위치
  display: flex;
  //2. 크기
  // 3. 꾸미기
  background-color: #495057;
`;
const InputText = styled.input`
  //1. 위치
  flex: 1;
  padding: 0.5rem;
  padding-left: 1rem;

  //2. 크기
  font-size: 1.125rem;
  //3. 꾸미기
  background: none;
  border: none;
  outline: none;
  line-height: 1.5;
  color: white;
  &::placeholder {
    color: #dee2e6;
  }
`;
const BtnSubmit = styled.button`
  //1. 위치
  padding-left: 1rem;
  padding-right: 1rem;
  //2. 크기
  //3. 꾸미기
  border: none;
  background: none;
  outline: none;
  color: white;
  cursor: pointer;
  background-color: #868e96;
  font-size: 1.5rem;
  transition: 0.1s background ease-in;
  &:hover {
    background: #adb5bd;
  }
`;
const List = styled.ul`
  //1. 위치설정
  //2. 크기
  //3. 꾸미기
`;
const Item = styled.li`
  //1. 위치설정
  display: flex;
  padding: 10px;

  //2. 크기
  //3. 꾸미기
  label {
    flex: 1;
    display: flex;
    align-items: center;
  }
  & + & {
    border-top: 1px solid #efefef;
  }
`;
const Checkbox = styled.input`
  //1. 위치설정
  //2. 크기
  //3. 꾸미기
  background: none;
  border: none;
  outline: none;
`;
const Content = styled.div`
  //1. 위치설정
  padding-left: 0.5rem;
  //2. 크기
  //3. 꾸미기
`;
const BtnDelete = styled.button`
  //1. 위치설정
  border-radius: 15px;
  //2. 크기
  //3. 꾸미기
  background: none;
  border: none;
  outline: none;
`;

export default Todo;