본문 바로가기

JAVASCRIPT/리액트2

리액트 커스텀 훅 사용 시 다중상태관리와 클로저의 존재 이유 리액트의 컴포넌트리액트의 컴포넌트는 함수와 클래스로 나뉜다.요새는 함수 컴포넌트를 사용하는 추세라고 한다. 왜냐하면 클래스 컴포넌트는 변경에 취약하여 인스턴스로 만든 속성에 접근이 가능한 반면 함수는 내부 상태를 클로저로 관리하기 때문에 외부에서 접근하지 못한다.또한 클래스 컴포넌트는 리액트 컴포넌트를 반드시 상속 받아야하고 생성자 super 호출 및 render메소드를 반드시 구현해야함.함수 컴포넌트는 리액트 엘리먼트를 반환해야함.클래스 컴포넌트는 상태를 관리하기 위해 this 객체를 사용한다.반면 함수 컴포넌트는 상태관리에 한계가 있기 때문에 등장한 것이 훅(hook)이다.훅(hook)리액트의 useState를 사용하여 함수 컴포넌트의 state값을 변경한다. (클래스의 인스턴스의 경우 this.st.. 2024. 6. 12.
리액트 vscode, node.js 설치 후 프로젝트 생성까지(create-react-app) 리액트란? 설치에 앞서 리액트를 간단하게 알아보자. 자바스크립트 라이브러리로 사용자 인터페이스를 더 간편하게, 그러니까 Single Page Application을 효율적으로 만들기 위해 쓴다. 우리가 자주 쓰는 웹이나 앱(ex 인스타그램)들 중 페이지를 새로고침하지 않고 정보를 새로 불러와 교체하는 방식의 페이지를 제작하는데 리액트가 효과적이다. 물론 자바스크립트로도 만들 수는 있지만 코드가 매우 길어져 관리가 복잡한 단점이 존재한다. 또 html 문법을 함수, array, object 같은 곳에 보관하고 재사용 가능해서 확장성 또한 뛰어나다. 자바스크립트의 라이브러리답게 기본 언어는 자바스크립트 문법과 매우 흡사하다. 하지만 jsx 같은 자바스크립트에서 볼 수 없던 파일 형식도 있고 문법도 조금씩 다.. 2023. 7. 5.