-오늘의 나-
오전
counter 실습을 다시 했는데 이번엔 컴포넌트도 혼자 분리해보면서 감을 잡은것 같다.. (진짜?)
~알고보니 테스트케이스만 통과하는 코드였잖슴~
오후
문제 설명
영어가 싫은 머쓱이는 영어로 표기되어있는 숫자를 수로 바꾸려고 합니다. 문자열 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?"
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;
리액트 숙련 강의 가보자고..!
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;
이렇게 그려진다 신기
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 예시
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가 속한 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;
ㅎㅎ고생많으셨어요!