오전: 유데미 리액트 강의 (함수타입)

useState를 const(상수)로 선언하는 이유

useState를 불러오고 '=' 연산자로는 title에 새로운 값을 할당하지 않음
그래서 const가 최선.

event.target.value

input에 입력한 값을 가져올 수 있는 event.

useState를 여러 개 불러오기

useState는 하나의 컴포넌트 안에 여러 개 불러올 수 있고
불러온 useState들은 서로 완전히 분리된 형태로 작동한다.

방법 1

useState를 각각 선언하여 개별 Handler함수를 구성한다.

const [enteredTitle, setEnteredTitle] = useState('');
const [enteredAmount, setEnteredAmount] = useState('');
const [enteredDate, setEnteredDate] = useState('');

const amountChangeHandler = (event) => {
    setEnteredAmount(event.target.value);
};

const amountChangeHandler = (event) => {
    setEnteredAmount(event.target.value);
};

const amountChangeHandler = (event) => {
    setEnteredAmount(event.target.value);
};

방법 2

• useState를 객체형태로 하나로 묶어 쓰는 방법이 있다.
  대신 함수에서 해당 객체를 불러올 때 변경될 값을 제외하고 변경이 없는 다른 값도 항상 같이 선언해줘야 한다.
  그럴 때는 아래와 같이 ...userInput을 사용한다. 꼭 변경될 값보다 위에 선언해주기!
• state를 업데이트 할 때마다 이전 state에 의존함.

const [userInput, setUserInput] = useState ({
        enteredTitle: '',
        enteredAmount: '',
        enteredDate: ''
});

const titleChangeHandler = (event) => {
    setUserInput({
	    ...userInput,
        enteredTitle: event.target.value
    })
};

const amountChangeHandler = (event) => {
    setUserInput({
	    ...userInput,
        enteredAmount: event.target.value
    })
};

const dateChangeHandler = (event) => {
    setUserInput({
	    ...userInput,
        enteredDate: event.target.value
    })
};

방법 3

• setUserInput함수를 불러와서 함수를 pass해야함.
  매개변수로 prevState를 쓰면 업데이트 되기 전의 state snapshot을 받아오게 된다.
• 방법 3을 사용하는 이유 : 대부분의 경우에는 방법 1, 2를 사용해도 무방하지만, React가 동시에 많은 state 업데이트를 계획한 경우, 오래되거나 잘못된 state snapshot에 의존할 수 있게 되므로.
• 방법 3의 경우 함수 내에 제공하는 state snapshot이 항상 최신 state snapshot이라는 걸 React가 보장한다. 그러므로 방법 3이 안전하다!
  최신 state로 업데이트되어야 한다면 이 함수 폼을 써야 한다.

const [userInput, setUserInput] = useState ({
        enteredTitle: '',
        enteredAmount: '',
        enteredDate: ''
});

const titleChangeHandler = (event) => {
    setUserInput((prevState) => {
        return {...prevState, enteredTitle: event.target}
    });
};
const amountChangeHandler = (event) => {
    setUserInput((prevState) => {
        return {...prevState, enteredAmount: event.target}
    });
};
const dateChangeHandler = (event) => {
    setUserInput((prevState) => {
        return {...prevState, enteredDate: event.target}
    });
};

react 공부방법 변경

생활코딩 리액트 강의 -> 인프런 제로초 리액트 강의 -> 노마드코더 리액트 강의로 넘어가기로...(+ react공식문서도 같이 읽기!)
유데미 리액트 강의 자막 품질이 너무 안 좋다ㅠ

오후: 프로그래머스 2019 카카오 기출 '실패율'

function solution(N, stages) {
    let answer = []; // 실패
    let failArr = []; // 스테이지별 실패율, 스테이지번호를 2차원 배열로 저장
    let tmpNum=stages.length; // 사람 수 카운트 (push한 이후에 계속 빼야함)

    for (let i=1; i<=N; i++) {
        let tmp=0; // 클리어못한 스테이지 카운트
        for (let j=0; j<stages.length; j++) {
            if (i===stages[j]) tmp++;
        }
        failArr.push([i, Number((tmp/tmpNum).toFixed(3))]);
        tmpNum-=tmp;
    }

    failArr.sort((a, b) => { // 2차원배열 sort정렬!
        if(a[1]===b[1]) return a[0]-b[0];
        else return b[1]-a[1];
    });

    for (let i=0; i<failArr.length; i++) {
        answer.push(failArr[i][0]);
    }

    return answer;
}

let n = 5;
let stages = [2,1,2,6,2,4,3,3];
console.log(solution(n, stages));

풀이과정

1. 2중 for문을 돌려서 임시배열에 [스테이지, 실패자수/stages.length (게이머 수)(==실패율)]을 push해서 2차원 배열로 만든다.
2. sort배열로 실패율 기준으로 내림차순 (실패율이 같을 경우에는 스테이지 숫자가 낮은 게 우선) 정렬을 한다.
3. 스테이지 숫자만 answer배열에 push한다.

...였는데...테스트케이스는 통과했는데 제출했더니 절반이상이 틀렸다고 나온다. 사람들이 얘기하는 거 보면 vscode와 프로그래머스 ide가 0으로 나누는 것에 대해 처리하는 게 다르다는 것 같긴 하던데 일단 내일 다시 시도하는걸로ㅠ

저녁: 생활코딩 리액트 강의 (클래스타입)

컴포넌트 선언규칙

1. 클래스명은 반드시 대문자로 시작한다.
2. 클래스 안에 있는 함수는 function을 생략한다.
3. 컴포넌트는 반드시 하나의 최상위 태그로 시작해야한다.
4. 클래스 안에는 반드시 render() 함수와 return()을 선언해야 한다.

우리가 JSX문법으로 기재해도 리액트가 웹브라우저에게 html태그로 컨버팅해서 전달해준다.
TOC(table of content) = 목차
같은 컴포넌트라도 컴포넌트마다 다른 값을 설정해줄 때 props를 사용한다.

props와 state정의

props :

1. 휴대폰에 비유하자면 휴대폰 버튼.
2. 컴포넌트의 기본적인 동작을 바꾸고 싶을 때 사용자에게 제공하는 것 (컴포넌트의 구현자에게 주요한 정보)
3. 읽기전용. 변경되는 값이 아닌 순수함수처럼 동작해야한다.

state :

1. 휴대폰에 비유하자면 눈에 보이지 않는 상태, 조작, 매커니즘을 담당하는 부품.
2. 컴포넌트 내부적으로 사용되는 것들
3. 비공개, 컴포넌트에 의해 완전히 제어됨

state값 초기화

class App expends Component {
	constructor(props){
    	super(props);
    }
	render() {
    	return (

		);
    }
}

render보다 먼저 실행되면서 컴포넌트를 초기화 시킬 때 쓰는 코드는 랜더 위에 constructor를 짜고 그 안에 코드를 작성한다.
constructor함수는 초기화를 담당한다.