전체 글70 [리액트] Hooks의 정의와 사용법 훅은 리액트 버전 16.8에서 새롭게 등장한 개념이다.최근에는 리액트로 개발을 할 때 대부분 훅을 사용하기 때문에 훅에 대해 잘 이해하는 것이 중요하다. Hook란?리액트 컴포넌트에는 두 가지 종류가 있다. 하나는 클래스 컴포넌트, 하나는 함수 컴포넌트 컴포넌트에는 state라는 중요한 개념이 등장한다.이 state를 이용해서 렌더링에 필요한 데이터를 관리하게 된다.클래스 컴포넌트에서는 생성자에서 이 state를 정의하고 setState 함수를 통해 state를 업데이트한다.이처럼 class 컴포넌트는 state와 관련된 기능 뿐만 아니라 컴포넌트의 생명주기 함수들까지 모두 명확하게 정의되어 있기 떄문에 잘 가져다 쓰기만 하면된다.하지만 기존 함수 컴포넌트는 클래스 컴포넌트와 다르게 코드도 굉장히 간결하.. 2024. 5. 10. [리액트] Props 정의 실습 보호되어 있는 글 입니다. 2024. 5. 8. [리액트] Rendering Elements의 정의, 특징 토이 프로젝트를 하기 전 따로 공부하기 위해 작성한 글입니다. Elements란?요소 성분이란 의미리액트 앱을 구성하는 가장 작은 블록들을 의미.웹사이트에 대한 모든 정보를 담고 있는 객체인 DOM에서 사용하는 용어. const element = Hello, world;대입 연산자 왼쪽 부분에 나오는 변수의 이름이 엘리먼트이다.이 코드가 실행될 때 대입 연산자의 오른쪽 부분은 React의 createElement 함수를 사용하여 엘리먼트를 생성하게 된다.결국 이렇게 생성된 것이 리액트 엘리먼트가 되는 것이다.그리고 리액트는 이 엘리먼트를 이용해서 실제 우리가 화면에서 보게 될 DOM 엘리먼트를 생성한다. 그렇다면 React 엘리트는 실제로 어떻게 생겼을까?React 엘리먼트는 자바스크립트 객체 형태로 존.. 2024. 5. 8. [리액트] JSX란? (정의, 역할, 장점 및 사용법) 토이 프로젝트를 하기 전 따로 공부하기 위해 작성한 글입니다. jsx는 리액트로 개발할 때 필수적으로 사용해야한다.JSX란?JavaScript를 JS라고 많이한다.A syntax extension to JavaScript 자바스크립트의 확장 문법이란 의미자바스크립트의 문법을 확장했다는 뜻 (JavaScript + XML / HTML) const element = Hello, world!;JSX코드 JSX의 역할내부적으로 XML, HTML 코드를 JavaScript로 변환하는 과정을 거치게된다.그렇기 때문에 실제로 우리가 JSX로 코드를 작성해도 JavaScript코드로 나오게 된다.여기서 JSX 코드를 JavaScript코드로 변환하는 역할을 하는 것이 바로 리액트의 createElement라는 함수이다.. 2024. 5. 7. [리액트] npx create-react-app 가 실행되지 않을 때 리액트 강의 실습 도중에 터미널 명령어가 안 먹는 오류가 발생했다.새로운 리액트 애플리케이션을 생성하기 위해 vscode의 터미널에서 명령어를 적었는데 해당 오류가 발생..(해당 명령어 : npx create-react-app [프로젝트명]) 해당 오류 메시지를 자세히 보니 npm이 필요한 파일 또는 디렉토리를 찾을 수 없다는 의미였다.(C:\Users\kim\AppData\Roaming\npm 경로를 찾을 수 없다는 뜻) 해결방법1. Node.js, npm 버전 확인해당 명령어로 Node와 npm이 제대로 설치되었는 지 확인.Node.js, npm의 문제는 아닌 걸로 판단하여 react-app을 재설치하기로 결정. 2. 리액트 앱 재설치# create-react-app 제거 후 재설치 npm unin.. 2024. 5. 6. [리액트] HTML란 무엇인가 토이 프로젝트를 하기 전 따로 공부하기 위해 작성한 글입니다. HTML란?Hyper Text Markup Language 약자로써, 마크업 언어의 한 종류이다웹 사이트의 뼈대를 구성하기 위해 사용하는 마크업 언어 여기서 마크업이란 것은 문서나 데이터를 처리하기 위해 문서에 추가되는 정보를 의미한다.그리고 마크업 정보를 표현하기 위한 언어를 마크업 언어라고 한다.HTML은 이러한 마크업 언어의 한 종류이다. HTML에서는 우리가 흔히 태그라고 부르는 것을 사용해서 웹사이트의 구조를 만들고 웹사이트에 들어갈 내용들을 채워넣게 된다. 태그란?HTML을 기술하기 위해 사용하는 명령어의 집합 HTML 문서의 콘텐츠(contents) 영역 지금까지 html, head, body태그에 대해 간략하게 알아보았다... 2024. 5. 6. 이전 1 2 3 4 ··· 12 다음
