react 실습 세번째! react hook!
name과 nickname을 입력받아서 render시키는 컴포넌트인 InputSample 컴포넌트를 완성한다.
주석 부분을 채우면 된다.
2022-05-12.1.49.15.mov
이렇게!
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를 위와 같이 변경하여 중복 렌더링을 방지한다!
2022-05-17.9.51.41.mov
위와 같은 계산기를 만들기!
- 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 함수를 이용한다.
2022-05-20-20-23-19.mp4
모두 잘 실행되는 것을 확인할 수 있다.