리액트

리액트에서 사용되는 JSX문법에 대해서 배우다. import './App.css' /* shift + alt + f : prettier 저장 JSX문법 - HTML 과 JS를 하나의 파일에 작성할 수 있는 문법 JSX문법의 특징 1. 반드시 부모요소가 하나여야 한다. 모든 것을 감싸는 div태그로 해결 + 꼭 가 아니어도 된다. 2. 표현식 사용 {변수}로 표현식 단, if문은 사용할 수 없다.. 2-1. 조건식이 1개일 때 - && 연산자 하나의 조건식을 확인할 때 A && "B" => A가 true이면 &&의 오른쪽이 출력된다. 2-2. 조건식이 2개일 때 - 삼항연산자 활용 2-3. 조건식이 3개일 때 - return문 위에 조건식을 만든 후 결과값만 {}에 넣어준다. 3. 기존 HTML문법과 다른..

리액트 실행 및 파일 설명 리액트 실행 VSCode에서 새로운 터미널을 열어준다. 새로운 터미널의 경로가 리액트가 설치된 폴더에 연결이 됐는지 확인하고 안되면 cd로 경로 변경한다. npm start를 하면 메인페이지가 새로운 탭(크롬)에 띄워진다. 파일 설명 node_modules 폴더는 우리가 프로젝트 구동에 필요한 라이브러리의 소스코드를 모아둔 폴더이다. public 폴더는 잠깐 html 파일이나 이미지 파일을 보관할 때 사용하는 폴더이다. 가장 중요한 src 폴더에 코드를 짠다. App.js가 메인 페이지이다. App.js에서 코드를 짜면 메인 페이지에 바로 반영이 된다. js 파일에다가 html 코드를 짰는데도 브라우저에 띄워지는 이유는 App.js를 index.html에 넣어주는 index.j..

React.js 정의와 설치 및 프로젝트 폴더 세팅 1. React.js? 리액트는 자바스크립트만으로 UI 구성이 어려워서 Meta에서 만든 라이브러리이다. JS의 단점은 HTML파일과 JS파일을 분리해야하지만 React.js는 JSX문법을 사용해서 HTML문법과 JS 문법을 동시에 사용한다. JSX는 JS에 XML을 추가한 확장 문법이다. 파일을 분리하지 않기 때문에 가독성이 높고 작성하기 쉽다. JS의 또 다른 단점은 document 문법이 너무 길다는 것이다. 그리고 새 페이지를 들어갈 때마다 새로고침을 한다. 리액트는 SPA로 서버로부터 새로운 페이지를 불러오지않고 현재 페이지를 동적으로 다시 작성함으로써 유저와 소통하는 웹사이트이다. 한국에서는 React.js를 많이 사용하기 때문에 React...