오늘의 나는 무엇을 배웠을까?
React
1. 기본 커맨드
npm init react-app <폴더명>으로 리액트 프로젝트 생성npm run start로 개발 모드 실행control + C로 개발 모드 종료
2. JSX
- JavaScript XML
- JS에 XML을 추가한 확장된 문법
- 하나의 파일에 JS와 HTML을 동시에 작성
- React의 엘리먼트를 생성
2-1. 문법
- 컴포넌트가 여러개라면 반드시 부모 요소 하나가 감싸는 형태
- React가 하나의 컴포넌트만을 반환할 수 있기 때문에
- return 문 안에 반드시 하나의 최상위 태그가 있어야 함
- Fragment를 활용하면 DOM에 별도의 노드를 추가하지 않고 자식을 그룹화 할 수 있음
<Fragment></Fragment>or `<></>
function App() {
return (
<h1>~</h1>
<h2>~</h2>
)
} // 에러 발생
function App() {
return(
<div>
<h1>~</h1>
<h2>~</h2>
</div>
)
} // 정상 실행- JS 표현을 사용하기 위해서는 코드를
{}로 감싸주자
- 표현식만 사용 가능
- 따라서
if문,for문,함수 선언과 같은 문장은 사용 불가능
function App() {
const name = "React";
return (
<h1>{name}</h1>
)
}if 문대신삼항 연산자사용undefined를 렌더링 하지 않아야 함
function App() {
const name = undefined;
return name;
} // X
function App() {
const name = undefined;
return (
<div>{name}</div>
)
} // 위와 같이 JSX 내부에서 렌더링은 가능- 자바스크립트 예약어와 같은 속성명 사용 불가
class속성을 지정할 때className으로 표현,
// 기존 HTML
<div class="classss"></div>
// JSX
<div className="classss"></div>for도htmlFor로 사용
-문자가 포함된 스타일 이름들을 카멜 표기법으로 작성
ex. background-color => bacKgroundColor- 여러 단어가 조합된 HTML 속성들 또한 카멜 표기법으로 작성
ex. onclick => onClick- 단, 비표준 속성을 다루는
data-*속성은 있는 그대로 문법으로 작성
3. 컴포넌트
- React에서 UI 요소를 구분할 때 사용하는 단위
- 앱을 이루는 가장 작은 조각
- 새로운 컴포넌트 생성, MVC의 뷰를 독립적으로 구성하여 재사용 가능
- 함수 컴포넌트, 클래스 컴포넌트가 있음
3-1. 구성 요소
- property(props)
- 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터
- 프로퍼티 값은 자식 컴포넌트에서 수정이 불가능함 (읽기 전용)
- state
- 컴포넌트의 상태를 저장하고 수정 가능한 데이터
- context
- 부모 컴포넌트에서 생성하여 모든 자식 컴포넌트에 전달하는 데이터
3-2. 함수 (function) 컴포넌트
- JS의 함수 기반 컴포넌트
function또는 화살표 함수로 컴포넌트를 정의하고return문에 JSX 코드 반환
function Component1() {
return (
<>
Hello World!
</>
)
}
const Component1 = () => {
return (
<>
Hello World!
</>
)
}3-3. 클래스 (class) 컴포넌트
- JS 클래스 기반 컴포넌트
class로 정의하고render()함수에서 JSX 코드 반환
import React, { Component } from "react";
class Component2 extends Component {
render() {
return (
<>
Hello World!
</>
)
}
}- React의 ComponentClass를 상속받음
render()메소드를 필수로 사용해야 함this키워드 사용 가능
4. Props
- Properties = 속성들이 모인 객체
- 컴포넌트에 지정한 속성들이 모인 객체
- 컴포넌트를 정의한 함수의 첫번째 매개변수로 전달됨
- 컴포넌트를 활용할 때 속성값을 다양하게 전달하고, props 값을 활용하면 속성값에 따라 다른 모습을 띈 컴포넌트를 그릴 수 있음
import React from 'react';
import Hello from './Hello';
function App() {
return (
<Hello name="react" emotion="happy"/>
);
}
export default App;import React from 'react';
function Hello(props) {
return <div>`안녕하세요 ${props.emotion} ${props.name}`</div>
}
export default Hello;- Props 는 객체 형태를 띄므로 구조 분해 문법을 활용할 수 있음
function Hello({ emotion, name }) {
return <div>`안녕하세요 ${emotion} ${name}`</div>
}Children
- JSX 문법으로 컴포넌트 작성 시 단일태그가 아닌 열고 닫는 태그 형태로 작성할 때,
- 태그 내부에 작성된 코드가
children값에 담김
function Button({ children }) {
return <button>{children}</button>;
}
export default Button;function App() {
return (
<div>
<Button>버튼1</Button>
<Button>버튼2</Button>
<div>
);
}
export default App- 화면에 보여질 모습을 직관적인 코드로 작성하고자 할 때 사용
- 컴포넌트 내부에 컴포넌트, 복잡한 태그 등등을 작성할 수 있음
5. State
- 상태를 나타내기 위해 사용
- 상태가 변경될 때마다 컴포넌트가 다시 렌더링 되므로, 화면을 그려내는 데 중요한 역할을 함
- state를 만들고, 바꾸기 위해서
useState함수 사용
import { useState } from 'react';
// ...
const [num, setNum] = useState(0);
// ...useState함수는 초깃값을 인자로 받은 뒤,- 요소 2개를 가진 배열의 형태로 실행 결과를 반환하기 때문에 구조 분해 문법으로 작성
- 첫번째 변수 :
state, 두번째 변수 :setter함수 - 일반적인 함수 이름 컨벤션은 변수 이름에 'set'을 붙여 카멜 표기법으로 작성
state의 변경은setter함수를 통해, 함수의 인자로 전달한 값으로 변경
참조형 State
- JS의 참조형 값의 경우 주솟값을 참조하므로,
- 값이 변경되어도 주솟값이 변경되지 않는다
- 따라서, 상태가 변경되었다고 판단하지 않음
//...
const [numList, setNumList] = useState([]);
const handleClick = () => {
const num = Math.floor(Math.random * 10);
numList.push(num);
setNumlist(numList);
};
//...와 같은 코드가 있을 때, push 메소드를 이용해 배열의 값을 변경한 후, setter 함수로 상태를 변경하려 하면 동작하지 않는다.
배열의 주솟값이 변경되지 않았으므로 상태가 변경되지 않았다고 판단하는 것이다.
그래서 참조형 state를 활용할 때는 Spread 문법을 활용하는 것과 같이 새로운 참조형 값을 만들어 상태를 변경해 줘야 한다.
const [numList, setNumList] = useState([]);
const handleClick = () => {
const num = Math.floor(Math.random * 10);
setNumlist([...numList, num]);
};이제 코드가 원하는 대로 잘 동작할 것이다.
오늘의 나는 어떤 어려움이 있었을까?
React를 배우기 시작하며 자바스크립트 기초가 탄탄해야 하는 이유를 깨달았다.
앞으로도 기본 자바스크립트 파트도 복습하고 추가 학습을 해야겠다고 생각을 했다.
또, 어제 잠을 잘 못 잤는데 저녁 식사 이후에 너무 피곤해서 집중이 잘 되지 않았다.
일찍 자기 위해 노력해야겠다.
내일의 나는 무엇을 해야할까?
- React 웹 개발 시작하기 강의 마저 듣기
- 개인 데일리 미션
- React 공식 문서 Using Hooks~ 읽기
개발자를 지망하는 경영학도