'Web/React' 카테고리의 글 목록

[React] 8. Hooks

리액트 16.8에서 등장 Hook을 사용하면, 클래스컴포넌트의 기능을 함수 컴포넌트에서도 사용할 수 있도록 지원해준다! Hook 갈고리 원래 존재하는 기능에 갈고리를 걸어 원하는 시점에 정해준 함수가 실행되도록 함. use~ 로 시작함. 대표적인 Hook (use 어쩌구) useState() 훅 state를 사용하기 위한 Hook 함수컴포넌트에서 클래스컴포넌트처럼 state를 쓰기 위해서 사용함. ex) 값이 바뀔 때마다 렌더링이 되어야 한다. useState를 사용하여 값이 바뀔 때마다 렌더링이 되도록 함. state가 바뀔 때마다 렌더링되도록할 때 사용된다. 사용법 const [변수명, set함수명] = useState(state의 초기값); * 변수 각각에 대해 set함수가 따로 존재한다. useE..

Web/React 2023. 11. 6. 07:04

[React] 7. State and Lifecycle

State 리액트컴포넌트의 상태. 리액트 컴포넌트의 변경 가능한 데이터. state는 개발자가 정의하여 사용한다. 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 한다. 자바스크립트 객체 Lifecycle 생명주기 리액트 컴포넌트의 생명주기 생성자 constructor 렌더링 render 언마운트 componentWillUnmount 상위컴포넌트에서 현재컴포넌트를 더이상 화면에 표시되지 않게 될 때 componentWillUnmount가 호출됨 컴포넌트가 계속 존재하는 것이 아니라 시간의 흐름에 따라 생성되고 업데이트되다가 사라진다. 알림 실습 React Developer Tools ( React Developer Tools ) 크롬 확장 프로그램 설치 후 사용 콘솔 대신 이것을 사용 No..

Web/React 2023. 11. 5. 16:40

[React] 6. Components and Props

6. Components and Props Components A, B는 리액트 컴포넌트이다. 이러한 컴포넌트를 여러번 사용해서 하나의 페이지를 구성하고 있다. 작은 컴포넌트들이 모여 하나의 컴포넌트를 구성하고, 이러한 컴포넌트들이 모여 전체 페이지를 구성한다. 리액트 컴포넌트를 하나의 함수라고 생각하면 쉽다. 하지만 자바스크립트의 함수와는 약간 다르다. 리액트컴포넌트는 속성Props를 넣으면 엘리먼트를 리턴한다. 객체지향의 의미와 비슷하다. Props prop이 여러 개인 것. prop : property, 속성 (엘리먼트를 만들기 위한 재료) 컴포넌트의 속성 자바스크립트 객체 컴포넌트 : props를 받아 엘리먼트를 리턴하는 함수 엘리먼트 : 보이는 부분 props : 컴포넌트에 전달할 정보를 담고 ..

Web/React 2023. 11. 5. 15:43

[React] Error: react_dom_client__WEBPACK_IMPORTED_MODULE_1__.render is not a function

React로 간단한 Clock컴포넌트를 만들고 index.js 수정 후 렌더링을 하였더니 위와 같은 에러가 발생했다. render는 함수가 아니라고 한다. 원인 알고보니 ReactDOM.render는 React 18 이상 버전에서는 지원하지 않는다는 것이다. ReactDOM.render 대신 createRoot를 사용하라고 명시되어있다. 참고: https://react.dev/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis 나의 React 버전을 확인해보니 최신 버전인 18.2.0이었다. 원인을 찾았으니 해결하러 가보자. 해결 이제 ReactDOM.render를 createRoot로 바꿔보자. 렌더링이 정상적으로 되었다. 콘..

Web/React 2023. 11. 5. 12:14

[React] 6. Rendering Elements

Elements 리액트 앱을 구성하는 가장 작은 블록들 자바스크립트 객체 형태로 존재. 컴포넌트 렌더링을 위해 모든 컴포넌트가 createElement를 통해 엘리먼트로 변환된다. Elements의 특징 immutable : 변경할 수 없는 (불변의) 엘리먼트 생성 후에는 children이나 attributes를 바꿀 수 없다. Root DOM Node 모든 리액트 앱은 단 하나의 Root DOM Node를 가지게 된다. 엘리먼트 생성 후 root div에 렌더링 렌더링 : ReactDOM.render() 사용 const element = 안녕 리액트!; ReactDOM.render(**element**, **document.getElementById('root')**); => ReactDOM.rentd..

Web/React 2023. 11. 5. 12:01

[React] Error: Already included file name

Book.jsx에서 에러가 발생. 에러 : Already included file name 원인 : 처음 생성할 때 book.jsx로 생성했다가 b를 B로, 대문자로 수정하여 발생하는 오류 => 파일이름에서 소문자를 대문자로 바꿔서 마주한 오류 해결 : vscode를 껐다가 키면 된다.

Web/React 2023. 11. 5. 11:56

[React] 4. JSX

JSX의 장점 가독성이 올라간다. Injection Attacks를 방어함. Book.jsx Library.jsx index.js 실행 : npm start 💡 npm start와 npm run 의 차이? npm start : package.json의 scripts에 있는 start 명령어를 실행. npm run : 그 외의 scripts를 실행하는 명령어. ex) npm run build; npm run test;

Web/React 2023. 11. 5. 11:55

[React] 3. 리액트 시작하기

index.html 악깡버 블로그 styles.css h1 { color: green; } create-react-app npm create-react-app sunakang //Akkangbu 같이 대문자가 있으면 생성안됨. cd sunakang npm run Node.js 14.0.0이상 npm 6.14.0 이상

Web/React 2023. 11. 4. 23:36

[React] 2. 리액트 소개

리액트의 정의와 개념 React : A JavaScript library for building user interfaces 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리 라이브러리? 자주 사용되는 기능들을 정리해 모아놓은 것. (”기능모음집”) 프레임워크 vs 라이브러리 프레임워크 : Angular.js, Vue.js ⇒ 흐름의 제어 권한이 프레임워크에 있다. 라이브러리 : React ⇒ 흐름의 제어 권한이 개발자에게 있다. 리액트의 장점 빠른 업데이트와 렌더링 속도 Virtual DOM 가상의 돔 DOM : 웹페이지를 정의하는 하나의 객체. 하나의 웹사이트 정보를 모두 담고 있는 큰 그릇 업데이트해야하는 최소한의 부분만을 Virtual DOM이 찾아 업데이트함. 2. 컴포넌트 기반 ⇒ 재사용..

Web/React 2023. 11. 4. 22:49

[React] 1. 개발환경 설정하기

Node.js : JavaScript runtime npm : node package manager - Node.js를 위한 패키지 매니저 프로젝트에서 필요로 하는 다양한 외부 패키지들의 버전, 의존성 관리. 편하게 삭제할 수 있게 도와줌. Node.js 설치 시 자동으로 함께 설치됨. 설치 방법 [Node.js] https://nodejs.org/en/ 에서 LTS버전 설치. 버전 확인 [npm] 버전 확인

Web/React 2023. 11. 4. 22:29

악깡버👩🏻‍🌾

Web/React 검색 결과