useState 사용하기 - 함수형 컴포넌트
2022. 8. 31. 22:30
React
❓ state 리액트 컴포넌트 내에서 바뀔 수 있는 값을 의미한다. ❓ 함수형 컴포넌트 내에서 state사용하기 원래, 클래스형 컴포넌트에서만 지원이 되었지만, 이제는 "useState" 라는 함수를 이용하여 함수형 컴포넌트 내에서도 사용할 수 있게 되었다. Hooks라는 기능이 사용되는데 이 Hooks의 종류는 다양해서 이번에는 useState만 공부해보고 나중에 또 공부해야겠다. 먼저, Hooks 기능을 사용하기 전에 배열 비구조화 할당이라는 것을 알고 넘어가야 한다. 배열 비구조화는 객체 비구조화 할당과 비슷하다. 배열 안에 들어 있는 값을 쉽게 추출할 수 있게 해주는 문법이라는 것만 생각하자. 예를 들어 const array = [1, 2]; const one = array[0]; const tw..
Props객체 사용법과 리액트 컴포넌트
2022. 8. 30. 15:44
React
❓컴포넌트 리액트에서 컴포넌트는 독립적이고 재사용이 가능한 UI를 만들 수 있는 단위이다. "props"라고 하는 객체의 입력을 받은 후, 화면에 어떻게 표시될 지를 반환한다. ❓리액트 라이프사이클 리액트에서 컴포넌트는 여러 종류의 "생명주기 메서드"를 가진다. 이 메서드를 오버라이딩 하여 특정 시점(예를 들어, 컴포넌트가 mount또는 un-mount 될 때) 에서 코드가 실행되도록 설정할 수 있다. 하지만, 이는 클래스형 컴포넌트 에서만 사용할 수 있는 내용이었다. 그러나 리액트에 Hook기능이 생기면서 최근에는 함수형 컴포넌트 + Hook을 주로 이용하는 추세라고 한다. ❓함수형 컴포넌트 함수형 컴포넌트는 클래스형 컴포넌트보다 선언하기가 편하고, 메모리도 덜 사용한다고 한다. 물론 그 성능에 큰 차..
💡 1. 맥북에서 nvm설치하는 법 (터미널)
2022. 8. 12. 16:51
React
먼저 터미널을 열고 다음 코드를 실행한다. curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash 그다음에, 터미널을 재시작하고, 다음 명령어를 입력하여 nvm이 잘 설치되었는지 확인한다. nvm --version 만약 버전 정보가 보이지 않고 다음의 에러가 뜬다면 아래의 해결방법을 그대로 따라한다! zsh: command not found: nvm 해결 방법 현재 위치에서 "ls -al" 명령어로 파일을 살펴보면 아마도 .nvm파일과 .bash_profile 파일이 있을 것이다. 이렇게 nvm이 정상적으로 설치되었는데도 불구하고 위의 오류가 뜨는 것은 바로 맥북 버전에따른 터미널의 기본 쉘이 다르기 때문이다. 많은 ..