React12 [React] 컴포넌트 특징 컴포넌트 특징 저번 학습에서 전체적인 틀 컴포넌트 방식등의 구조를 찾아봤다면 이번학습에서는 실제로 코드를 입력해보며, 구조를 파악해보려고 한다. Reactjs code snippets *[VS CODE]**에서 리액트 확장 플러그인 설치 해당 코드 스니펫을 설치하게 되면 js 파일 내에서 사용이 가능하게 된다. 트리거 + Tab 키로 React 기본 뼈대를 만들 수 있다. 기본(보편)적으로 쓰이는 건 함수형과 클래스형인거 같다. 1. 클래스형 컴포넌트 : rcc + Tab key 2. 함수형 컴포넌트 : rsc + Tab key 1. 클래스형 컴포넌트 과거에 주로 사용했지만 함수형 컴포넌트에 hook을 지원하면서, 공식 문서에서는 함수형 컴포넌트와 훅을 같이 사용하기를 권장 하고 있다. 클래스형 컴포넌트.. 2022. 11. 25. [React]구조파악하기 리액트 구조 React를 설치시 여러 폴더 및 파일들이 설치가 됩니다. 리액트가 설치 되었을때 보여지는 폴더 구조 디렉토리 종류로는 node_modules : 모듈 패키지들이 위치 하는 폴더이다. 'npm install / yarn' 을 통해 설치를 할 수 있다. node를 통해 package.json 안에 저장 된 패키지들을 불러 올 수도 있다. public : static 자원폴더, 실제 html이 구현 되는 폴더로 보면 편하다. 리액트는 가상DOM 을 이용하여 부분 부분 나눠서 구현을 하는데, 그 부분에서 실제 DOM 역할을 해주는 html이 있는 폴더다. src : 리액트 개발을 하는데 사용하는 폴더이다. 이 부분이 리액트에서의 메인이고, 이 폴더에서 파일을 작성하고 수정하고 한다. 1. Publ.. 2022. 11. 25. [React]시작하기 리액트란? 리액트는 페이스북에서 만든, 사용자 인터페이스를 만들기 위해 사용되는 자바스크립트 라이브러리이다. 출처 : 위키백과 리액트의 대표적인 특징 JSX 문법 (JavaScript eXtension) 사용 React에서 HTML을 표현할 때, JSX를 사용한다. 외관상 HTML같은 마크업 언어를 리터럴로 입력하는 것으로 보이는데, 빌드 시 Babel에 의해 자바스크립트로 변환된다. 자바스크립트 코드를 HTML처럼 표현할 수 있기 때문에 용이한 개발이 가능하다. Component 기반 컴포넌트(Component)는 프로그램에 있어서 재사용이 가능한 각각의 독립 모듈이다. 소프트웨어 시스템에서 독립적인 기능을 수행하는 '모듈'로서 시스템을 유지 보수 하는데 있어서 일부분 교체가 가능하도록 만든 기술이다... 2022. 11. 25. 이전 1 2 다음 728x90
