React 맛보기

property(속성)의 복수형
component의 속성을 의미 → component에 전달할 정보를 담고 있는 자바스크립트 객체를 뜻한다.

또한, ⭐Read-Only라는 중요한 특징을 갖는다.
즉, element 생성 도중에 값이 바뀔 수 없다. 붕어빵을 굽는 중간에 속재료를 바꿀 수 없다는 것을 떠올리면 된다! 따라서 값을 변경하기 위해선 아예 새로운 element를 생성해야 한다.

props의 기본적인 사용법은 다음과 같다.
(price에서와 같이 문자열이 아닌 정수, 변수, 다른 컴포넌트 등이 들어갈 때에는 중괄호를 사용해야 한다.)

function Product(props) {
	return (
    	<Card 
      		name = '노트'
      		desc = '노트입니다'
      		price = {1000}
      />
    )
}

// props 객체
{
  name: '노트',
  desc: '노트입니다',
  price = 1000
}

 

Component

Function component와 Class component가 있는데, 후자가 어렵다는 의견이 많아 function component를 개선해서 사용하는 추세라고 한다. 관련해서 재미있게 읽었던 블로그 글!

Function Component 예시

function Intro(props){
	return <h1>{props.name}입니다.</h1>;
}

Class Component 예시

모든 class component가 리액트의 component를 상속받는다는 특징이 있다.

class Intro extends React.Component {
	render() {
    	return <h1>{this.props.name}입니다.</h1>;
    }
}

 

사용시 주의할 점

Component 이름은 클래스와 마찬가지로 ⭐항상 대문자로 시작해야 한다. 소문자로 시작하는 컴포넌트는 리액트가 돔 태그로 인식하기 때문이다. 예를 들어 <header>는 일반적으로 우리가 알고 있는 헤더 태그라면 <Header>는 헤더라는 이름을 가진 컴포넌트(사용자 정의 태그)가 되는 것이다!

---

깃을 통해 인터넷 베포까지 완료하였다.

 

---

https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/

자바스크립트 비동기 처리와 콜백 함수

https://joshua1988.github.io/web-development/javascript/promise-for-beginners/

자바스크립트 Promise 쉽게 이해하기

---

create react app을 통해 JSX를 번역한 상태로 올려서 개발본 아니라 완성본으로 배포한다.

---

 

리액트 앱에 띄운 상태까지 완료

https://hoya-kim.github.io/2021/09/14/package-json/

알고 쓰자 package.json

---

출처 : https://www.inflearn.com/course/%EB%A7%8C%EB%93%A4%EB%A9%B4%EC%84%9C-%EB%B0%B0%EC%9A%B0%EB%8A%94-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EA%B8%B0%EC%B4%88