✨ Front-end/리액트(React)15 [React] Component 컴포넌트 사용하기 리액트에서 컴포넌트(Component)란? 앱을 이루는 최소한의 단위. 즉, DOM 구조를 만드는 틀이다. 컴포넌트를 사용하여 MVC 뷰를 독립적으로 구성해 재사용할 수 있고, 이를 통해 새로운 컴포넌트를 손쉽게 제작할 수 있다. HTML 삽입 미리보기할 수 없는 소스 이렇게 만들어진 코드가 있다. 하지만 react에서 html을 계속 이런식으로 그리면 가독성이 떨어질 수 있다. 따라서 한줄로 요약해보고자 한다. HTML 삽입 미리보기할 수 없는 소스 컴포넌트 이름은 항상 대문자로 시작해야한다. ( Why ? 리액트는 소문자로 시작하는 컴포넌트를 DOM 태그로 취급하기 때문) 1) 함수형 Component 위와 같이 function 함수가 끝난 뒤 바로 아래에 Component 함수를 만들어 App 함수.. 2023. 8. 6. [React] 리액트 JSX문법, State 알아보기 JSX란? JavaScript에 XML을 추가한 문법이다. 그러나, JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다. 사용법 - JSX(JavaScript XML)은 일반적인 HTML처럼 사용하면 된다. 단, JSX에서 특별히 허용되는 문법과 지켜야 할 문법이 존재하며 이 문법만 숙지하면 기존의 HTML 코드 안에 JavaScript 코드를 넣어 사용하는게 가능하다. JSX 에서 지켜야 할 문법 1. 하나의 부모 엘리먼트가 반드시 감싸야 한다. 만약 어떤 요소로 감싸기 애매할 경우 Fragment를 사용하기도 하는데, 처럼도 사용할 수 있다. 다만, Fragment는 일반 태그보다 처리속도가 느리므로 사용을 지양하는것이 좋다. 2.자바 스크립트 표현식 3. if, f.. 2023. 2. 26. [React] 리액트 설치 방법과 개발 환경 세팅하기 1. node.js 를 깔아준다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. Visual Studio Code를 깔아준다. https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and availa.. 2023. 2. 25. 이전 1 2 3 4 다음
