본문 바로가기

전체 글

 (404)
[React] PropsRequired로 required 옵션 실현 필요한 값이 없을 경우 에러 메시지를 출력하는 required 리액트에서는 변수에 모든 값을 지정하지 않아도 에러가 발생하지 않지만, 필수로 필요로 하는 값의 경우에는 값을 지정하지 않으면 에러를 발생시켜야 하는 경우가 필요하다. [App.js] import './App.css'; import PropsRequired from './PropsRequired'; function App() { return ( ); } export default App; - ReactVersion 값만 지정 [PropsRequired.js] import datatype from 'prop-types'; // (1) let PropsRequired = ({ReactString, ReactVersion}) => { return(..
[React] PropsDataType/자료형 타입 확인 PropsDataType 좀 더 정확한 데이터를 다루기 위해 필요한 자료형 자바 스크립트에서는 자바 언어와 같이 자료형을 따로 선언하는 것이 아니기 때문에, 값을 보고 데이터의 형태를 파악한다. 이 때 이 자료형을 명확히 하고 싶다면 자식에서 값을 받을 때 해당 자료형을 지정해 줄 수 있다. [App.js] import './App.css'; import PropsDataType from './PropsDataType'; function App() { return ( ); } export default App; [PropsDataType.js] import dataType from 'prop-types'; //(1) function PropsDataType(props){ let {String, Numbe..
[React] Class 컴포넌트 & Function 컴포넌트 Class Component & Function Component 리액트에서는 컴포넌트를 생성할 수 있는 방법이 2가지 있는데 이는 Class와 Function이다. 기존에는 Class 컴포넌트만 존재했지만, React Hook이 도입되면서 Function 컴포넌트도 많이 도입되기 시작했다. Class 컴포넌트 : React에서 제공하는 Component 클래스를 상속받음 : 멤버 변수에 접근할 때 this를 항상 바인딩 해야 함 : 상태, 데이터를 담을 수 있는 state object를 가지며, state 업데이트 시 render()가 호출되어 업데이트된 것이 보여짐 >> 다양한 컴포넌트의 상황에 따라 구현해 놓은 함수를 리액트가 알아서 불러주는 특징이 있음 [App.js] import './App.c..
[React] 라이프 사이클 메서드 라이프 사이클 : 리액트의 컴포넌트에는 라이프 사이클(생명 주기)가 존재한다. 리액트의 컴포넌트에는 생명 주기가 존재하는데, 이는 페이지에 렌더링 되기 전인 준비 과정에서 시작해 페이지에서 사라질 때 끝이 나는 형태로 되어 있다. 메서드는 총 9개로 작업을 작동하기 전 실행되는 Will 접두사가 붙은 메서드/어떤 작업을 작동한 후 실행되는 Did 접두사가 존재하며 아래와 같은 카테고리로 나눌 수 있다. 마운트 : Dom이 생성되고 웹 브라우저상에 나타나는 것 : 아래의 4개 메서드는 컴포넌트에만 존재하는 메서드 호출하는 메서드 1. constructor : 클래스 생성자 메서드, 컴포넌트 생성자 메서드 : 컴포넌트가 생성되면 가장 먼저 실행되는 메서드로 컴포넌트를 새로 만들 때마다 호출되는 메서드 : 렌..
[React] 리액트 애플리케이션 생성 및 실행 리액트 애플리케이션 생성하기 리액트 애플리케이션을 생성하는 명령어는 간단한데, 만들고자 하는 폴더에서 터미널을 통해 생성이 가능하다. create-react-app '리액트 애플리케이션을 만들 파일/폴터' 위 명령어를 통해 리액트 애플리케이션으로 만들 폴더가 있는 위치로 이동한 다음 위의 명령어를 통해 리액트 애플리케이션을 실행한다. 명령을 사용하기 위해서는 해당 명령어 설치가 필요한데, 이는 아래 블로깅을 참고하면 된다. 2023.10.20 - [공부 자료/리액트[React]] - [리액트] 리액트 설치(create-react-app) 시 permission 에러 해결 [리액트] 리액트 설치(create-react-app) 시 permission 에러 해결 npm을 이용하여 create-react-ap..
[React] 리액트란? 리액트(React)란? 리액트는 프론트엔드 Javascript 프레임워크로 facebook에서 만든 Javascript 라이브러리이며, UI 구성 요소를 빌드하기 위한 도구이다. 또한. 리액트는 순수 자바스크립트이고 이 자바스크립트를 통해 컴포넌트로 만들어 나간다. VirtualDom 생성 VirtualDom은 RealDom으로 변화가 적용되기 전에 앞단에서 변화를 다 수용하고 난 다음에 최종적인 결과를 Real Dom에 전달해주는 역할을 하기 때문에 Real Dom에서 받을 연산들을 VirtualDom에서 진행이 되어 딱 한 번의 전달만 이루어지므로, 연산의 횟수가 줄어든다. * VirtualDom이란? : 리액트는 SPA(Single Page Application)이기 때문에 Dom에 조직이 많이 발..
[React] 리액트 설치(create-react-app) 시 permission 에러 해결 npm을 이용하여 create-react-app을 설치할 때 아래와 같이 permission denied가 뜨는 경우가 존재하는데, 이 때에는 아래와 같이 터미널에 작성하면 된다. 1. sudo 명령을 사용하여 관리자 권한으로 npm 명령을 실행 sudo npm install -g create-react-app 2. npm의 prefix를 사용자의 홈 디렉토리 내에 있는 디렉토리로 변경하여, 사용자 권한으로 패키지를 설치 npm config set prefix ~/.npm 3. 다시 create-react-app 설치 npm install -g create-react-app 이렇게 하면 권한이 바뀌기 때문에 설치가 잘 된다. 이제 create-react-app 명령어를 통해 리액트 애플리케이션을 생성할 ..
[React] 리액트 사용을 위한 node.js 설치 [node.js 공식 사이트] https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 1. 자신이 사용하고하 하는 버전을 찾아서 다운로드 후 더블클릭 (버전의 경우 장단점이 존재하기 때문에 버전 선택이 중요) 2. 나오는 창에서 계속 > 동의 > 설치를 설치 완료 [설치 완료 확인 방법] node --verstion // node.js 설치 버전 확인 npm --version .. npm 설치 버전 확인 해당 명령어는 터미널에서 입력 및 확인이 가능함 * 맥북의 경우 homebrew를 이용하여 터미널에서 설치가 가능하지만, 위의 방법이 간단!

티스토리툴바