React.js는 JavaScript 라이브러리 입니다
라이브러리
간략 설명 : 프로그램 제작 시 필요한 기능
비교 설명 : 자동차 바퀴, 자동차 에어백
프레임 워크
간략 설명 : 프로그램 기본 구조(뼈대)
비교 설명 : 자동차 프레임
어키텍처
간략 설명: 프로그램 주요 구조 설계
비교 설명 : 자동차 도면
플랫폼
간략 설명: 프로그램 실행 환경
비교 설명: 자동차 주행 환경(일반 고속도로용, 사막 전용)
React 1 - JSX
Html 문법을 javaScript 코드 내부에 써주면 그것이 바로 JSX입니다!
JSX attribute
태그에 attribute(속성)을 주고 싶을 때는 항상 "" 쌍따옴표로 감싸주세요.
예를 들어, class를 주고 싶을 때 원래 속성명은 class이지만 JSX에서는 className을 사용해야 합니다.
Self-Closing Tag
그리고 JSX에서는 어떤 태그라도 self closing tag가 항상 가능합니다.
Nested JS
- (필수) 소괄호로 감싸기
const good = (
<div>
<p>hi</p>
</div>
);
중첩된 요소를 만들려면 () 소괄호로 감싸주세요!- (필수) 항상 하나의 태그로 시작
const wrong = (
<p>list1</p>
<p>list2</p>
);위와 같이 제일 처음 요소가 sibling이면 안됩니다. 무조건 하나의 태그로 감싸져야 합니다. 아래의 코드처럼 첫 요소는 하나의 태그로 감싸주세요.
const right = (
<div>
<p>list1</p>
<p>list2</p>
</div>
);
Rendering
html 요소(element), 또는 React 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것을 렌더링(rendering) 이라고 말합니다.
React 요소가 DOM node에 추가되어 화면에 렌더되려면 ReactDOM.render 함수를 사용합니다. 첫 번째 인자에는 JSX로 React 요소를 인자로 넘기고, 두 번째 인자는 해당 요소를 렌더하고 싶은 container(부모요소)를 전달합니다.
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);React 2 - Component와 Props
Component
프론트앤드 개발에서 Component 라는 단어를 많이 사용합니다. component(컴포넌트)란 재사용 가능한 UI 단위입니다.
만약 ‘내정보수정’ 페이지가 추가되어 password input이 필요하다면, 또 똑같은 html, css를 작성해주어야합니다. 이럴 때 동일 코드가 반복되는 부분을 하나의 component로 만들어서 같은 디자인의 input이 필요한 곳마다 재사용할 수가 있습니다.
React 컴포넌트에서는 input을 props라고 말하고 return은 화면에 보여져야할 React요소가 return됩니다.
Component 만들기
함수로 Welcome 컴포넌트 구현하기
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}class로 Welcome 컴포넌트 구현하기
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}위처럼 정의한 컴포넌트는 함수/class 이름으로 사용할 수 있습니다. 태그처럼 으로 작성합니다.
우리가 정의한 컴포넌트를 사용할 때, 원하는 attribute를 얼마든지 추가할 수 있습니다. 그러면 Welcome 컴포넌트(함수)에서 parameter(매개 변수)로 해당 attribute를 받아서 사용할 수 있습니다. 이것을 props라고 말합니다. props는 property의 줄임말입니다.
.(dot)으로 속성명에 접근가능하고, props.속성명 으로 속성 값을 가져올 수 있죠.
[property]
var person = {
name: "Jason",
age: 25,
occupation: "Student",
getPersonProfile: function() {
return "Name : " + this.name +
"\nAge : " + this.age +
"\nOccupation : " + this.occupation;
}
};
name, age, occupation은 분명 property처럼 보입니다.
React 3 - Component의 State
state
state란 말 그대로 컴포넌트의 상태 값입니다.
state와 props는 둘 다 object 이고, 화면에 보여줄 정보(상태)를 가지고 있다는 점에서 서로 비슷한 역할을 합니다. props는 컴포넌트를 사용하는 부모쪽에서 전달해야만 사용할 수 있고(parameter 처럼), state는 컴포넌트 내에서 정의하고 사용합니다.
*constructor : 생성자 , 즉, 생성자는 클래스가 new 표현식에 의해 인스턴스화되어 객체를 생성할 때 객체의 레퍼런스를 생성하기 전에 객체의 초기화를 위해 사용되는 코드의 블록이다.
생성자가 여러 개일 때, 다른 생성자를 호출할 수가 있다. 이때 사용되는 특별한 코드가 this 이다. 객체가 자기 자신을 참조할 때 사용하는 this는 생성자를 호출하기 위한 특별한 형태인 this()를 통하여 클래스 내의 다른 생성자를 호출할 수 있게 된다.
<코드 잘 읽어보기!!>
React 4 - React 컴포넌트의 Lifecycle
render, componentDidMount, componentDidUpdate, componentWillUnmount 등의 함수는 React.Component class에서 제공하는 메서드 입니다. 컴포넌트를 만들 때 class로 생성하면 위의 메서드를 사용할 수 있고, 컴포넌트가 lifecycle에 따라 각자의 메서드가 호출됩니다.
setInterval() Method
.jpg)