react 실습 세번째! react hook!

name과 nickname을 입력받아서 render시키는 컴포넌트인 InputSample 컴포넌트를 완성한다.
주석 부분을 채우면 된다.

이렇게!
name과 nickname을 입력 받으면 수정되도록!

• name과 nickname을 설정하는 함수를 각각 setName, setNickname으로
• useState을 이용하여 입력된 name 또는 nickname이 변경되는 event가 발생하면 setName 또는 setNickname 호출한다.
• 변경되는 각각의 값은 입력된 name 또는 nickname
• '초기화' 버튼을 누르면 onReset 함수 호출
• onReset 함수는 name과 nickname을 모두 ""으로 초기화. 즉 어떤 값도 들어가지 않는다.
• 따라서 name 또는 nickname에 값이 있으면 그 값을 출력하고, 값이 없으면 없다는 문구를 출력!

위의 경고 해결하기!

• 오류 수정후에도 해당 button을 클릭할 때마다 숫자가 count되어 올라가도록 하기
• useState 와 useEffect를 모두 사용하기

• 주석 그대로...
• 기존의 경고 문구는 deps에 count라는 변수가 없어서 발생하는 것!
• 따라서 이 count를 prev라는 변수에 저장하고, arrow function을 통해 이 변수가 항상 새로운 상태를 받아들이도록 한다.

이렇게 되면 count가 1이 아닌 2부터 시작하는 문제가 발생한다.

rendering이 중복해서 발생하기 때문...

따라서 index.js를 위와 같이 변경하여 중복 렌더링을 방지한다!

위와 같은 계산기를 만들기!

• useState와 useEffect를 필수적으로 사용하기
• @ 버튼을 클릭하면 저장된 연산식이 초기화
• 계산결과가 나올때마다 화면에 표시

• 계산기 전체를 감싸는 CalculatorWrapper
• 계산 결과를 출력하는 창인 ResultWrapper. 계산 결과는 오른쪽에 출력되도록 하고 글자 크기는 22px로 한다.
• 계산기 버튼 스타일을 구현하는 Button. 마우스를 갖다 대면 마우스 커서가 바뀌고 버튼 색이 바뀌도록 한다. 그리고 margin을 props로 넘겨 받는다.

• calculateValue와 display는 각각 setCalculateValue, setDisplay 함수로 설정
  이때 초기화 값은 각각 ""와 false
• @ 버튼을 누르면 onReset 함수가 호출되고, 이 함수는 calculateValue를 ""로 초기화 한다.
• @와 = 이외의 버튼을 누르면 updateValue 함수가 호출되고, 이 함수는 기존의 calculateValue에 입력한 값을 더해 calculateValue 값을 다시 설정한다.
• = 버튼을 누르면 display 값이 변한다. 즉, 기존의 값이 false라면 true로, true라면 false로!
• 그리고 calculateValue에 값이 들어있는 경우에 한해, display 값이 변경되면 결과 창에 입력되어 있는 식을 계산하여 그 결과를 출력!
  이 과정에서 'x'는 * 연산자로 바꿔주고, 식 결과를 계산하는 과정은 eval 함수를 이용한다.

모두 잘 실행되는 것을 확인할 수 있다.