리액트 정말 헤롱헤롱하군여.....
내일 과제하기전에 문서 좀만 읽고 해야겠다. 강의만 들으니까 개념이 잘 안잡힌당.. 따흑...
오전
리액트 입문 강의 1주차 1-9까지
오후
프로그래머스 코테
어제 했던 배열에서 요소 개수 구하기를 응용해서 풀 수 있지 않을까 했는데
function solution(order) {
var answer = 0;
let elem = [3,6,9];
let arr = Array.from(String(order));
let idx = 0;
for(i of elem){
if(idx != -1){
idx = arr.indexOf(elem[i], idx+1);
answer++;
}
}
return answer;
}입력값:3 결과값:1 (O) 입력값:24923 결과값: 1 (X)
3,6,9 에서 한 번씩만 검사하고 다시 되돌아가지 못하는 문제가 있었다 따흑..
결국 수정한 코드 ⬇
function solution(order) {
var answer = 0;
let arr = Array.from(String(order));
for(let i =0; i<arr.length; i++){
if(arr[i] == 0) continue;
else if(arr[i]%3 == 0 || arr[i]%6 ==0){
answer ++;
}
}
return answer;
}3,6,9로 나누어떨어지면 +1을 해주도록 했다. 9의 경우는 3과 같아서 생략해도 무방했다.
if(arr[i] == 0) continue; 이 예외처리가 없으면 20130인 경우 결과값 3이 나온다.(0%3==0이기에..)
리액트 입문
Prop Drilling
- prop은 부모 -> 자식으로 일방향 전달
if prop 전달이 엄청나게 많아진다면?
➡ 해당 prop을 추적하기 힘들고 따라서유지보수가 어려워짐
Hook
const [value, setValue] = useState(초기값)
두번째인자 (setValue) - state 변경 함수/ 얘를 통해서만 변경 가능
동작원리
- 이해하고 넘어갈 것!
// src/App.js
import React, { useState } from "react";
function Child(props) {
return (
<div>
<button
onClick={() => {
props.setName("박할아"); // 드디어 받은 setName을 실행합니다.
}}
>
할아버지 이름 바꾸기
</button>
<div>{props.grandFatherName}</div>
</div>
);
}
function Mother(props) {
return (
<Child grandFatherName={props.grandFatherName} setName={props.setName} /> // 받아서 다시 주고
);
}
function GrandFather() {
const [name, setName] = useState("김할아");
return <Mother grandFatherName={name} setName={setName} />; // 주고
}
function App() {
return <GrandFather />;
}
export default App;input 값 -> setState
// src/App.js
import React, { useState } from "react";
const App = () => {
const [value, setValue] = useState('');
const onChangeHandler = (event) => {
// 사용자가 입력한 input값을 추출하기 위해
// event.target.value에 접근!!
const inputValue = event.target.value;
setValue(inputValue);
};
console.log(value);
return (
<div>
<input type='text' onChange={onChangeHandler} value={value} />
</div>
);
};
export default App;컴포넌트 꾸미기
-> div태그의 display 원속성은display: blockblock인데
따로 설정을 통해flex로 덮어쓰기를 해주었기 때문에 취소선이 생긴 모습
map()으로 반복없게
import React from "react";
import "./App.css";
const App = () => {
const vegetables = ['감자', '고구마', '오이', '가지', '옥수수'];
return (
<div className="app-style">
{vegetables.map((vegetableName) => {
return (
<div className="square-style" key={vegetableName}>
{vegetableName}
</div>
)
})}
</div>
);
};
export default App;map은 볼때마다 새롭지 왜
ES6 문법 특강
let / const
- 선언 : 변수명을 JS엔진에 알리는 것
- 할당 : 변수에 값을 저장
let - 재할당 가능. 재선언 불가능.
const - 재할당, 재선언 불가능. 초기값이 없으면 선언 불가
var- 재할당, 재선언 가능. 호이스팅
console.log(name) // undefined
var name = "name1"var name = "name1"
console.log(name) // name1
var name = "name2"
console.log(name) // name2화살표 함수
//ES6 const func = () => true const func = () => { return true } () => {} parm => {} (parm1, parm2, ...parms) -> {} // 익명 화살표 함수 () => {}
삼항연산자
조건 ? 참일 때 실행 : 거짓일 때 실행
var age = 26;
var beverage = (age >= 21) ? "Beer" : "Juice";
console.log(beverage); // "Beer"
연결된 조건문에서의 삼항연산자
function example(…) { return condition1 ? value1 : condition2 ? value2 : condition3 ? value3 : value4; } ============아래와 같음=============== function example(…) { if (condition1) { return value1; } else if (condition2) { return value2; } else if (condition3) { return value3; } else { return value4; } }
구조분해할당
- 배열 또는 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 해줌
// 객체의 경우
let user = {name: "nbc", age: 30};
let {name, age} = user;
// let name = user.name;
// let age = user.age;
console.log(name, age) // nbc 30
// 새로운 이름으로 할당
let {name: newName, age: newAge} = user;
console.log(name, age) // ReferenceError: name is not defined
console.log(newName, newAge) //nbc 30
let {name, age, birthDay} = user;
console.log(birthDay) // undefinedundefined을 방지하기 위해
미리 초기값을 할당해놓을 수 있다
let {name, age, birthDay = "today"} = user;
console.log(birthDay) // today스프레드
// 배열
let arr = [1,2,3];
let newArr = [...arr, 4];
console.log(newArr) // [1,2,3,4]
// 객체
let user = {name: "nbc", age: 30};
let user2 = {...user}
user2.name = "nbc2"
console.log(user.name) // nbc
console.log(user2.name) // nbc2- 전개구문을 사용하면 객체를 복사해, 기존값을 덮어쓰거나 새로운 값을 추가할 수 있다.
- 불변성을 지켜줄 수 있다
얼마나 유용하고 중요하면 리액트 강의에서도 또 등장!
배열을 setState 할 때 불변성을 지켜주기 위해, 직접 수정을 가하지 않고 전개 연산자를 사용해서 기존의 값을 복사하고, 그 이후에 값을 수정하는 식으로 구현합니다.
import React, { useState } from "react";
function App() {
const [dogs, setDogs] = useState(["말티즈"]);
function onClickHandler() {
// spread operator(전개 연산자)를 이용해서 dogs를 복사합니다.
// 그리고 나서 항목을 추가합니다.
setDogs([...dogs, "시고르자브르종"]);
}
console.log(dogs);
return (
<div>
<button onClick={onClickHandler}>버튼</button>
</div>
);
}
export default App;컨벤션
프젝 피드백으로도 받았던 변수명 통일에 대해 다시 한번 설명해주셨다
아 이건 되도록 꼭 지켜야되는군😉
UPPER_CASE : 상수
kebab-case : css, id, class
camelCase : 변수명, 함수명, 파일 이름
PascalCase : React Component 이름, 파일 이름 등
해뜰날