React5 React - JSX 1. JSX란? JSX는 리액트에서 사용하는 자바스크립트 확장 문법이다. JSX로 작성한 코드는 브라우저에서 동작하는 과정에서 바벨(Babel)을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. JSX는 많은 개발자에게 친숙한 구문을 사용하여, 요소(구성요소)의 렌더링 구조를 지정하는 방법을 제공한다. JSX 장점 - HTML 태그를 사용하기 때문에 보기 쉽다. - HTML 태그를 사용하면서 자바스크립트도 {}를 사용해 JSX 안에서 동작하게 할 수 있다. 2. JSX - Fragment react에서 컴포넌트를 나누어 개발을 할 때 불필요하게 div를 감싸고 내부부터 태그를 삽입하다 보면 불필요하게 DOM구조가 복잡해진다고 느낄 때가 있다. 이것을 Fragment를 통해서 불필요한 div 렌더링을 .. 2020. 6. 20. React - Component 1. Component란? UI의 구성 요소이다. 과제였던 westagram main 페이지를 예로 들어 Component로 나눠본다면, 크게 nav 컴포넌트와 main 컴포넌트, 그리고 main 컴포넌트 안에는 feed 컴포넌트와 mainright 컴포넌트로 나눌 수 있다. 이와 같이 화면의 구성 요소들을 컴포넌트로 나눌 수 있다. Component를 나눌 시 컴포넌트를 재활용하여 사용할 수 있고, 코드 유지보수에 좋고, 해당 페이지가 어떻게 구성되어 있는지 한눈에 파악하기 좋다. 그리고 특징으로는 컴포넌트는 또 다른 컴포넌트를 포함할 수 있다. 2. Class vs Functional Component 컴포넌트를 선언하는 방식은 두 가지가 있다. Class형 컴포넌트(Class Component) 함.. 2020. 6. 19. React - CRA default Settings 1. CRA 초기 세팅 구성 CRA를 설치하면 초기에 세팅되는 파일 구성이다. 2. 묶어서 이해하기 node_modules + package.json + .gitignore package.json은 라이브러리/패키지의 세팅 리스트 정보(버전, 종류)가 들어있는 파일이다. 모든 프로젝트마다 package.json이 하나씩 존재한다. package.json 안에 "dependencies": {안에}를 보면 리액트를 사용하기 위한 모든 패키지 리스트, 버전을 확인 가능하다. 실제 코드는 node_modules 폴더에 존재한다. 내가 작성한 코드와 설치한 패키지는 내 로컬에만 존재한다. 공유할 때 내가 작성한 코드 + package.json(설치한 패키지 정보)만 넘긴다. (이유: node_modules 등 같.. 2020. 6. 19. React - CRA, Node, npm 1. CRA 리액트 앱 생성은 리액트를 학습하기에 편안한 환경이며 리액트에서 새로운 단일 페이지 어플리케이션 구축을 시작하는 가장 좋은 방법이다. 최신 JavaScript 기능을 사용할 수 있도록 개발 환경을 설정하고, 앱 생산에 있어 최적화해준다. 리액트 앱은 백엔드 로직이나 데이터베이스를 처리하지 않고 프론트엔드 빌드 파이프라인을 생성하므로 원하는 백엔드와 함께 사용할 수 있다. 2. 환경 설정 CRA 프로젝트를 설치하기 위해선 Node와 npm이 설치되어 있어야 한다. Node 크롬의 자바스크립트 실행 환경에 기반을 둔 빠르고 확장성 있는 네트워크 애플리케이션을 만들기 위한 플랫폼 브라우저 밖의 환경에서도 자바스크립트를 사용 가능하게 해줌 리액트 애플리케이션은 웹 브라우저에서 실행되는 코드라 Nod.. 2020. 6. 19. 이전 1 2 다음
