[REACT] REACT 시작하기 & JSX

먼저 구글에 nodejs 서치해서 가장 최신 버전 다운로드하기.

오른쪽 현재 버전 다운로드

• 원하는 폴더에 가서 터미널에 npx create-react-app 프로젝트명 으로 리액트 프로젝트 생성
• npm start로 웹페이지 열 수 있음 (기본 설정에 따르면 localhost:3000에서 열림)

여기까지 하면 기본 세팅이 완료된다! 

 

• src/index.js는 src/App.js의 함수형 컴포넌트에서 return 안에 있는 html을 public/index.html에 넣으라는 역할. id가 root인 div태그에 app.js에 있는 걸 다 넣음. 그래서 렌더링된 걸 볼 수 있음.
  =App component는 함수로 만들어져있음. 그리고 default로 export 돼있음.(export default App;) 이걸 index.js에서 import해서 사용함. 함수로 만든 컴포넌트를 함수형 컴포넌트라고 하며 대문자로 시작! jsx(javascript XML)로 만든 react element를 리턴함.
• 리액트는 데이터바인딩 쉬운 장점. {변수명, 함수 등} 으로 하면 됨.

 

• jsx(javascript XML) 문법
  • class 주고 싶으면 className="클래스명"
  • style은 style={object(객체) 자료형으로 만든 스타일}
    <div style={{backgroundColor: "black", padding: "16px", color: "#61DAFB", fontSize: "50px"}}>
  • html보다 javascript 문법에 더 가깝기 때문에 camelCase로 사용한다. 
• 이미지 사용 -> 이미지 파일을 import해온 후(import logo from './logo.svg';) return 안에 {import명}으로 씀. {logo} 이렇게.
• 객체 사용

const naver = {
    name: "네이버",
    url: "https://naver.com"
}
//----------------------------------------------
function App() {
  return (
    <div>
        <a href={naver.url}>{naver.name}</a>
    </div>
  );
}

 

• 앱 이름 (웹페이지 이름) 변경은 index.html에 가서 <title> 변경하면 됨.