[React] basic

1. JSX (javascript syntax extension)

• Javascript 확장 버전. HTML 과 유사하게 생겼고, javascript 파일 내에서 작성할 수 있다.
• 원래의 Javascript 문법이 아니기 때문에, js 파일 내에 있는 JSX 문법을 브라우저에서 해석하지 못한다.

1-1 JSX element

HTML 문법을 Javascript 코드 내부에 써주는 것.
변수에 저장할 수도 있고, 함수의 인자로 넘길 수도 있다.

const hi = <p>Hi</p>;
const myFavorite = {
		food: <li> 샐러드 </li>,
        animal: <li> dog </li>,
        hobby: <li> programming </li>};

1-2 JSX attribute

• 태그에 attribute (속성)을 주고 싶을 때는 항상 "" 쌍따옴표로 감싸준다.
  ex)

const myFavorite = {
		food: <li> 샐러드 </li>,
        animal: <li> dog </li>,
        hobby: <li className = "list-name"> programming </li>};

1-3 self-closing tag

• JSX 에서는 어떤 태그라도 self-closing tag 가 항상 가능!
• 와

  는 같은 표현.

1-4 Nested JSX

• (필수) 소괄호로 감싸기 : 중첩된 요소를 만들려면 () 소괄호로 감싼다.

const good = (
<div>
		<p>hi</p>
</div> );

• (필수) 항상 하나의 태그로 시작 : 하나의 태그로 감싸져야 한다.

const right = (
<div>
	<p>list1</p>
    <p>list2</p>
</div>
);

2. Rendering

• Html 요소 또는 React 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것
• React 요소가 DOM node 에 추가되어 화면에 렌더되려면 ReactoDOM.render 함수를 사용한다.
• 첫번째 인자에는 JSX로 React 요소를 인자로 넘기고, 두번째 인자는 해당 요소를 랜더하고 싶은 container (부모 요소)를 전달한다.

ReactDOM.render (
	<h1>Hello, world! </h1>,                   - JSX 로 React 요소를 인자로 넘기고,
    document.getElementById('root')                 - 해당 요소를 랜더하고 싶은 html 파일의 부모 요소를 2번째 인자로 전달
);

Component

사용자가 정의한 태그를 재사용할 수 있게 하는 기술 (재사용 가능한 UI 단위)

• 가독성
• 재사용
• 유지 보수 (html 파일 안의 오류나 버그에 있어서의 수정을 동시 다발적으로 이룰 수 있다)
• 해당 페이지가 어떻게 구성 되어 있는지 파악 용이
• 컴포넌트는 또 다른 컴포넌트를 포함 (부모 컴포넌트 - 자식 컴포넌트)
• 독립적으로, 재사용이 가능한 코드로 관리할 수 있다. 하나의 컴포넌트에 필요한 html, css, js 를 모두 합쳐서 만들 수 있다.
• React 컴포넌트에서는 input 을 props 라고 말하고, return 은 화면에 보여져야 할 React 요소가 return 된다
• React 에서는 컴포넌트를 class 나 함수로 만들 수 있다.
• 컴포넌트의 첫글자는 무조건 대문자여야 한다.

Component = props => UI

1-1 함수로 component 구현하기

function Welcome(props) {
	return <h1> Hello, {props.name}</h1>;
}

1-2 class로 Welcome 컴포넌트 구현하기

• class 로 컴로넌트를 만드려면 React.Component 를 extends 해서 생성한다.
  컴포넌트를 생성할 때 render() 메서드는 무조건 정의해야하고, return 도 해주어야 한다.
• render() 메서드는 무조건 정의 해야한다는 말은, componen를 만들 때 필요한 메서드가 원래 더 있다는 말. 그 중에서 render () 만 필수.

class Welcome extends React.Component {
	render() {
    	return <h1> Hello, {this.props.name} </h1>;
    }
}

1-3 Component 사용

• 위처럼 정의한 컴포넌트는 함수 이름 or class 이름으로 사용 할 수 있다. 태그처럼 <Welcome /> 으로 작성
• 내가 정의한 컴포넌트를 사용할 때, 원하는 property 를 얼마든지 추가할 수 있다. 그러면 Welcome 컴포넌트 (함수)에서 parameter 로 해당 property 를 받아서 사용할 수 있다, 이것을 props 라고 말한다.
• . (dot) 으로 속성명에 접근 가능하고, props.속성명으로 속성 값을 가져올 수 있다.

function Welcome (props) {
	return <h1> Hello, {props.name} ! </h1>;
}

function App () {
	return (
    	<div>
  			<Welcome name="sasha" />
  			<Welcome name="john" />
  			<Welcome name="sara" />
	</div>
       );
  }
  
  ReactDOM.render(<App />, document.getElementById("root"));

• ReactDOM 은 react element 를 HTML 에 두는 역할을 한다.

Component 의 State

• state 란 컴포넌트의 상태 값
• state 와 props 는 둘 다 object 이고, 화면에 보여줄 정보(상태)를 가지고 있다는 점에서 서로 비슷한 역할을 한다.
• props 는 컴포넌트를 사용하는 부모쪽에서 전달해야만 사용할 수 있고 (함수의 parameter 처럼) ‼️읽기 전용‼️ 이다.
• state 는 컴포넌트 내에서 정의하고 사용하며 업데이트 할 수 있다.

const [isClicked, setIsClicked] = useState(false)

• 함수형 컴포넌트에서 state 를 만들 때는 useState 라는 함수를 이용
• useState의 실행 결과는 좌측의 [state, state 를 갱신할 수 있는 함수] 배열 형태로 리턴
• useState 를 통해서 isClicked 이라는 state 와 setIsClicked 라는 state 를 업데이트 할수 있는 함수 를 선언
• isClicked 라는 state 를 선언하는 코드
• useState의 인자로 전달된 값은 선언된 state의 초기값으로 할당됨
• useState 의 인자로 false 를 전달하여서 isClicked의 초기값이 false 가 되도록 설정