리액트 핵심 컨셉 (Core Concepts)
•
Components
•
Props
•
State
Components들로 UI를 쌓아 올리자
•
UI는 컴포넌트라 불리는 작은 블록으로 나눌 수가 있다.
•
컴포넌트를 사용하면 독립적이고 재사용 가능한 코드 스니펫을 작성할 수가 있다. 레고 블록이라 생각하면 이러한 개별 블록들을 가져와서 결합하여 더 큰 구조를 형성할 수 있다.
•
UI의 일부를 업데이트해야 하는 경우에 특정 컴포넌트 또는 블록을 업데이트할 수 있다.
이 모듈성은 어플리케이션의 나머지 부분을 건드리지 않고도 컴포넌트들을 쉽게 추가, 업데이트 및 삭제할 수 있기 때문에 코드를 쉽게 유지관리 할 수 있다.
컴포넌트 생성
리액트에서 컴포넌트는 함수이다.
Props으로 Data 표시
지금까지 컴포넌트를 재사용하는 경우에는
function Header() {
return <h1>Develop. Preview. Ship. 🚀</h1>;
}
function HomePage() {
return (
<div>
<Header />
<Header />
</div>
);
}
JavaScript
복사
<Header />를 두번 표시하였다.
Props로 같은 방식으로 일부 정보를 속성으로 리액트 구성 요소에 전달할 수 있다.
자바스크립트 함수와 유사하게 컴포넌트의 동작 또는 화면에 렌더링될 때 가시적으로 표시되는 내용을 변경하는 사용자 지정 인수(또는 Props)를 허용하는 컴포넌트를 디자인 할 수 있다.
그런 다음 이러한 Props를 상위 컴포넌트에서 하위 컴포넌트로 전달할 수 있다.
Props 사용
function HomePage() {
return (
<div>
<Header title="React 💙" />
</div>
);
}
JavaScript
복사
function Header(props) {
console.log(props);
}
// {title: "React 💙"}
JavaScript
복사
function Header({ title }) {
console.log(title) // "React 💙"
}
JavaScript
복사
JSX에서 변수 사용
점 표기법
function Header(props) {
return <h1>{props.title}</h1>;
}
JavaScript
복사
템플릿 리터럴
function Header({ title }) {
return <h1>{`Cool ${title}`}</h1>;
}
JavaScript
복사
함수의 리턴 값
function createTitle(title) {
if (title) return title;
else return 'Default title';
function Header({ title }) {
return <h1>{createTitle(title)}</h1>;
}
JavaScript
복사
삼항 연산자
function Header({ title }) {
return <h1>{title ? title : 'Default Title'}</h1>;
}
JavaScript
복사
State와의 상호작용 추가
function HomePage() {
// ...
function handleClick() {
console.log('increment like count');
}
return (
<div>
{/* ... */}
<button onClick={handleClick}>Like</button>
</div>
);
}
JavaScript
복사
State 및 Hooks
•
리액트에는 hooks 라는 함수 세트가 있다. 훅스를 사용하면 컴포넌트에 State와 같은 추가 논리를 추가할 수 있다.
•
State는 일반적으로 사용자 상호작용에 의해 트리거되는 시간이 지남에 따라 변경되는 UI의 모든 정보로 생각할 수 있다.
useState()
•
state를 관리하기 위한 React Hooks
•
useState() 배열을 반환하고 배열 분해를 사용하여 컴포넌트 내에서 해당 배열 값에 액세스하고 사용할 수 있다.
function HomePage() {
const [] = React.useState();
// ...
}
JavaScript
복사
•
배열의 첫 번째 항목은 state이며, value에는 아무 이름이나 지정할 수 있다. 하지만 설명이 포함된 이름을 지정하는 것이 좋다.
function HomePage() {
const [likes] = React.useState();
// ...
}
JavaScript
복사
•
배열의 두 번째 항목은 update 값에 대한 함수이다. set 업데이트 함수의 이름은 무엇이든 지정할 수 있지만 업데이트 하려는 state 변수의 이름 앞에 접두사를 붙이는 것이 일반적이다.
function HomePage() {
const [likes, setLikes] = React.useState(0);
JavaScript
복사
•
그런 다음 컴포넌트 내부의 state 변수를 사용하여 초기 state가 잘 작동하는지 확인할 수 있다.
function HomePage() {
const [likes, setLikes] = React.useState(0);
return (
<button onClick={handleClick}>Like({likes})</button>
);
}
JavaScript
복사
function HomePage() {
// ...
const [likes, setLikes] = React.useState(0);
function handleClick() {
setLikes(likes + 1);
}
return (
<div>
{/* ... */}
<button onClick={handleClick}>Likes ({likes})</button>
</div>
);
}
JavaScript
복사
요약
Props는 컴포넌트에 전달되는 읽기 전용 정보이다.
State는 시간이 지남에 따라 변경될 수 있는 정보이며, 일반적으로 사용자 상호작용에 의해 트리거된다.