React.js는 SPA(single page application) 기반의 프론트엔드 개발 프레임워크 중 하나로서, 컴포넌트 단위의 독립적ㅇ니 블록을 이용한 개발 방법을 이용.
SPA(single page application) 아키텍쳐
- 딱 한개의 페이지로 구성도니 웹 앱
- 서버에 1회 리소스를 요청(깜빡임 x) 컴포넌트 단위로 변경사항을 반영하기 때문에 깜빡임 없음
// hello(person)의 결과를 한번 예측해보세요!
// 함수의 입력값 또한 각각 구조가 해제되어 각각 변수에 할당됩니다.
// 특히 이 패턴을 많이 쓸거에요! 기억해주세요.
const person = {
name: '르탄',
age: '21'
}
function hello({name, age}) {
console.log(`${name}님, ${age}살이시네요!`);
}
hello(person);배열의 비구조화(구조분해 할당)도 이루어진다!!!
// 객체에서의 케이스와 마찬가지로 배열도 구조분해 할당이 이루어집니다!
const testArr = [1, 2, 3, 4, 5];
const [val1, val2, val3, val4, val5] = testArr;
console.log(val1);이러면 val1:1, ... 이렇게 키값쌍으로 매칭이 된다!
만약에 매칭이 안된다면 undefined.
npm 보단 yarn을 쓰자!
속도가 더 빠름
CRA: Create React App: set up a modern web app by running one command.
한 줄의 명령어 입력으로 React 프로젝트 개발에 필수 요소를 자동으로 구성하는 방법 -> 보일러플레이트
yarn create react-app week-1
npx create-react-app week-1
yarn start
하면 리액트 프로젝트 실행됌
그리고 root 경로에 jsconfig.json파일 만들고
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}상대경로를 절대경로로 지정한다!
React 컴포넌트란? - html을 return 하는 '함수'만드는 것
컴포넌트란 개별적인 여러조각을 말한다. 독립적인 객체라는 뜻
input으로 props를 주면 output으로 리액트 앨리먼트(화면에 표현)를 반환한다.
// props라는 입력을 받음
// 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return)
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
// 훨씬 쉬운 표현을 해보면 아래와 같죠.
function App () {
return <div>hello</div>
}리액트의 세상에서 말하는 컴포넌트는 '함수'
컴포넌트를 만들어보세요하면 html을 return 하는 함수를 만들면 된다.
Component 보는 방법
컴포넌트(함수)코드를 볼 때는 영역을 나누어서 보면 조금 더 편하다.
컴포넌트 밖에서는 내가 필요한 파일을 import해서 쓰고, export default라는 기능을 통해 내가 만든 컴포넌트를 밖으로 내보낸다.
컴포넌트안에는 자바스크립트를 쓸 수 있는 영역잉 있다
return을 기준으로 아래부분에는 HTML(JSX)를 작성할 수 있다.
여기에 작성한 html 코드와 값들이 화면에 보여짐
- 컴포넌트를 만들때 반드시 가장 첫글자는 대문자 (소문자로 쓰면 못읽음)
- 폴더는 카멜케이스로 작성
