JSX란?

• JavaScript XML을 줄인말로 JavaScript를 확장한 문법이다.
• 브라우저에서 바로 실행하는것이 아닌 Babel을 활용해서 JSX을 브라우저가 이해할 수 있는 JavaScript로 컴파일 하여 렌더링 합니다.
• 기본 웹을 만들던 방식인 HTML,CSS,JavaScript를 활용하는게 아닌 CSS,JSX 두가지로 할수 있다.

React개발을 시작하면서...

• 리액트로 개발을 시작하기에 앞서 React의 특징을 3가지 알아보겠다.

React 특징
1. Component를 기반으로 개발 (여러종류의 코드 묶음으로 기능별로 구현하여 적재적소에 적용할 수 있다.)

2. Virtual DOM: 가상의 Document Object Mode.로 실제 DOM을 조작하는게 아닌, DOM을 추상화 한 자바스크립트 객체를 구상해 사용한다
3. 계층형 구조를 이룬다. 여러 컴포넌트의 집합체인 만큼 주체를 이루는 컴포넌트를 기준으로 하위 컴포넌트를 만들어 하나의 앱을 구현한다.
!!!!(데이터는 하위 컴포넌트에서 상위 컴포넌트로 가는구조이다. 만약 상위에서 하위로 데이터를 전달하려는 경우 props를 활용하면 된다.)

React 장점

• 배우기 쉽고 간단하며 협업을 할때 컴포넌트를 기반으로 하기때문에 용이하다.
• 뛰어난 메모리관리,Garbage Collection 성능을 가지고 있다.
• 간편한 UI 수정과 재사용이 가능하다.
• 다른 프레임워크나 라이브러리와 혼용할 수 있다. 개발 완료된 서비스에도 적용이 가능하다.

목표

React로 다양한 컴포넌트를 만들고 그에따라 하나의 홈페이지로 구성하는것까지 마무리 해볼 예정이다.
CSS부분은 현재 학습중이므로 위치선정에 대해서만 긴밀히할뿐 시각적 효과는 좀더 공부를 하여 적용해볼 예정이다.
따라서, 현재 카페 및 원두를 로스팅하는 친척의 홍보용 홈페이지를 만들어볼 예정이다.

간단한 구성이며 세부적인 부분은 아직 기능적 측면에서 부족한 부분을 채우면서 목표성을 가지고 실행해 나갈 예정이다.

React시작하기

이제 React를 시작하기에 앞서 원래 vscode에서 파일 생성후 디버깅및 실행 하는것이 아닌 npx를 활용해 react 앱을 만들어 줘야 한다.
만들어줄 파일로 이동후 터미널에 아래와 같이 입력한다.

$npx create-react-app '사용할 이름' (소문자만 적용가능)

정상적으로 설치가 되는 모습이 보인다.
vsCode로 폴더를 연뒤 터미널에서 'npm run start'를 입력하면 아래와 같은 완료 문구가 출력되며 브라우저에 화면이 출력되는 모습을 볼 수있다.

! 필요 없는 컴포넌트와 파일들을 삭제한뒤 개발을 시작하면 되겠다. (현재 react구현을 확인하는 컴포넌트들이 있어 삭제를 해주면 되겠다. index와 App은 기본 컴포넌트로 삭제를 안할 예정이다. 위 컴포넌트를 상위 컴포넌트로 구성하여 개발할 예정이다.

첫번째 목표는 메뉴바를 구현하는것이다.

공공기관에서 메뉴바를 보면 마우스커서를 올릴경우 하위 메뉴바를 확인 할 수 있게 된다. 위 기술을 구현할 예정이다.

<출처: http://www.president.go.kr/ [대한민국 청와대]>