리액트 기초/개발환경 + JSX + Component

Component, props

Component 리액트를 레고에 비유하면 컴포넌트는 레고의 블록 하나를 의미한다! 컴포넌트는 클래스형과 함수형이 있다. 원래는 생김새와 용도까지 달랐지만 리액트가 발전함에 따라 이제는 생김새만 다르다고 봐도 무방하다. 컴포넌트를 이해하고 잘 사용하려면 웹 사이트를 잘 조각내야 한다. 아래와 같은 HTML 구조를 가진 페이지가 있다고 하자. ... ... ... ... 이 코드를 조각내면 아래처럼 나눌 수 있을 것이다. 나눈 조각 하나하나를 컴포넌트라고 부른다. 를 하나의 조각으로 나누면 너무 커서 재사용성이 떨어지기 때문에, 컴포넌트는 , 컴포넌트로 다시 나누었다. State & Props state는 Component가 가지고 있는 데이터이다. Component의 state는 자유롭게 수정, 삭제, ..

JSX

우선.. 아래 링크를 참고하여 리액트 프로젝트를 생성하자. https://duckgugong.tistory.com/172 React 개발환경 설정 VS Code React 코드 편집기로 사용할 개발환경 https://code.visualstudio.com/download Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platfor.. duckgugong.tistory.com JSX ? 리액트에서는 딱 하나의 빈껍데기인 html 파일만 존재한다. 어떤 뷰를 나타낼만한 태그들이 하나도 없다. public 폴더 아래에 있는 index.html index.html s..

React 개발환경 설정, 프로젝트 만들기

VS Code React 코드 편집기로 사용할 개발환경 https://code.visualstudio.com/download Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications. code.visualstudio.com Github Desktop https:..