[TIL] 내배캠4기-React-39일차

hare·2022년 12월 8일

TIL 내일배움캠프 리액트 프로그래머스_코테입문

내배캠-TIL

목록 보기

29/75

-오늘의 나-

오전

~~리액트 props,state복습~~
- ~~코알누 무료강의 따라하기~~
  counter 실습을 다시 했는데 이번엔 컴포넌트도 혼자 분리해보면서 감을 잡은것 같다.. (진짜?)
~~알고리즘 문풀 12/8~~
- https://school.programmers.co.kr/learn/courses/30/lessons/120894?language=javascript#
- ~알고보니 테스트케이스만 통과하는 코드였잖슴~

오후

~~리액트 숙련 강의 1-3~~
리액트 스터디 문서 읽기

프로그래머스 코테

문제 설명
영어가 싫은 머쓱이는 영어로 표기되어있는 숫자를 수로 바꾸려고 합니다. 문자열 numbers가 매개변수로 주어질 때, numbers를 정수로 바꿔 return 하도록 solution 함수를 완성해 주세요.

function solution(numbers) {
  
  //객체로?
  //문자열을 쪼개서
  //인덱스오브로 찾고
  //밸류값을 리턴?

  //includes 로 문자열 찾고
  //true면~ 해당 num을 반환

  const arr = [
    "zero",
    "one",
    "two",
    "three",
    "four",
    "five",
    "six",
    "seven",
    "eight",
    "nine"
  ];

  for (item of arr) {
    if (numbers.includes(item)) {
        
      // console.log("찾음");
      //해당 인덱스 값으로 대치
      //numbers = 이걸안써서 결과가 계속 안나왔음..
      numbers = numbers.replaceAll(item, arr.indexOf(item).toString());
    }
  }
  // console.log("numbers: ", numbers);

  return Number(numbers);
}

replace로 썼을 땐 테스트케이스만 통과하고 정답에서 막혔는데
팀원의 조언으로 replaceAll로 바꿔주니 바로 정답이..!!!!🥹

replace : 어떤 패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열을 반환
pattern이 문자열 인 경우, 첫 번째 문자열만 치환이 되며 원래 문자열은 변경되지 않는다.

예시
const p = 'The quick brown fox jumps over the lazy dog. If the dog reacted, was it really lazy?';
console.log(p.replace('dog', 'monkey'));

replaceAll : 일치하는 모든 문자열을 대치해준다.

const p = 'The quick brown fox jumps over the lazy dog. If the dog reacted, was it really lazy?';
console.log(p.replaceAll('dog', 'monkey'));
// expected output: "The quick brown fox jumps over the lazy monkey. If the monkey reacted, was it really lazy?"

counter 실습

App.jsx

import React, { useState } from 'react';
// import './App.css'
import PlusMinusBtn from './PlusMinusBtn';

function App(){

  const [count, setCount] = useState(0);
  
  return(
    <div>
      {count}
      <PlusMinusBtn count={count} setCount={setCount}/>
      </div>
  );
  
}

export default App;

PlusMinusBtn.jsx


// 증가 감소 버튼 컴포
function PlusMinusBtn ({count , setCount}){
  
  const plus = ()=> {
    // setCount(count++) -> 이건 동작안함!
    // setCount는 함수야.
    setCount(count+1);
  }
  
const minus = ()=> {
    setCount(count-1);
  }
  
  return(
    <>
<button onClick={plus}>증가라구</button>
<button onClick={minus}>감소라구</button>
</>
  );


  
  
}

export default PlusMinusBtn;

리액트 숙련 강의 가보자고..!

Styled-component

import React from "react";
import styled from "styled-components";

// styled 키워드를 사용해서 styled-components 방식으로 컴포넌트를 만듦

const StBox = styled.div`
  //이 안에 스타일 코드 작성
  //css와 동일한 문법
  width: 100px;
  height: 100px;
  border: 1px solid ${(props) => props.borderColor}; //부모컴포넌트에서 보낸 props를 함수인자로 받아오고 borderColor로 접근해서 그 값을 리턴해주는 모습!
  margin: 20px;
`;
function App() {
  return (
    <div>
      {/* 위에서 만든 sc컴포넌트를 사용한다 */}
      {/* props를 통해 borderColor라는 값을 전달해준다! */}
      <StBox borderColor="red">빨간Box</StBox>
      <StBox borderColor="green">초록Box</StBox>
      <StBox borderColor="blue">파란Box</StBox>
    </div>
  );
}

export default App;

이렇게 그려진다 신기

Switch문과 map을 사용한 리팩토링

import React from "react";
import styled from "styled-components";

// styled 키워드를 사용해서 styled-components 방식으로 컴포넌트를 만듦
const StContainer = styled.div`
  display: flex;
`;
const StBox = styled.div`
  //이 안에 스타일 코드 작성
  //css와 동일한 문법
  width: 100px;
  height: 100px;
  border: 1px solid ${(props) => props.borderColor}; 
//부모컴포넌트에서 보낸 props를 함수인자로 받아오고 borderColor로 접근해서 그 값을 리턴해주는 모습!
  margin: 20px;
`;
//Switch문과 map을 사용해서 리팩토링해보기!
//박스의 색을 배열에 담음
const boxList = ["red", "green", "blue"];
//색을 넣으면 이름을 반환해주는 함수
const getNBoxName = (color) => {
  switch (color) {
    case "red":
      return "빨간 박스";
    case "green":
      return "초록 박스";
    case "blue":
      return "파란 박스";
    default:
      return "검정 박스";
  }
};
function App() {
  return (
    <StContainer>
      {/* map을 이용해서 StBox를 반복하여 화면에 그려준다 */}
      {boxList.map((box) => (
        <StBox borderColor={box}>{getNBoxName(box)}</StBox>
      ))}
    </StContainer>
  );
}

export default App;

더 신기하다 신기방기

훅

useState 함수형 업데이트

useState 예시

const App = () => {
  const [number, setNumber] = useState(0);
  return (
    <div>
			{/* 버튼을 누르면 1씩 플러스된다. */}
 <div>{number}</div> 
      <button
        onClick={() => {
          setNumber(number + 1); // 첫번째 줄 
          setNumber(number + 1); // 두번쨰 줄
          setNumber(number + 1); // 세번째 줄
        }}
      >

한번 누를 때마다 3씩 증가할거라 생각했지만 댓츠노노.
* 일반 업데이트 방식 - batch 처리!
즉 우리가 onClick을 했을 때 setNumber 라는 명령을 세번 내리지만, 리액트는 그 명령을 하나로 모아 최종적으로 한번만 실행을 시킵니다. 그래서 setNumber을 3번 명령하던, 100번 명령하던 1번만 실행됩니다.

useEffect

useEffect는 useEffect가 속한 component가 화면에 렌더링될 때 실행된다!

의존성배열 예시

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

const App = () => {
  const [value, setValue] = useState("");
//무한렌더링 해결방법 -> 의존성배열
  useEffect(() => {
    console.log("hello useEffect");
  },[]); //비어있는 의존성 배열
  //처음 한번만 실행됨!
  //어떤 함수를 컴포넌트가 렌더링될 때 단한번만 실행하고 싶으면
  //의존성 배열을 빈배열로 주자!!!

  return (
    <div>
      <input
        type="text"
        value={value}
        onChange={(event) => {
          setValue(event.target.value);
        }}
      />
    </div>
  );
}

export default App;

hare

해뜰날

이전 포스트

[TIL] 내배캠4기-React-38일차

다음 포스트

[TIL] 내배캠4기-React-40일차

1개의 댓글

김태인

2022년 12월 9일

ㅎㅎ고생많으셨어요!

답글 달기