📖 React

자바스크립트 라이브러리의 하나로 사용자 인터페이스를 만들기 위한 웹 프레임워크

🙆‍♀️ JSX

자바스크립트의 확장버전으로 HTML과 아주 비슷하게 생겼고 자바스크립트 파일 내에서 작성할 수 있다 리액트에서 Element를 제공해준다.

👉 (필수) 소괄호로 감싸기

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

중첩된 요소를 만드려면 소괄호로 감싸주어야한다.

👉 (필수) 항상 하나의 태그로 시작

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

제일 처음 요소는 하나의 태그로 감싸주어야한다. div로 감싸지 않고 p부터 나오면 안된다.

🙆‍♀️ Rendering

html 요소, 또는 React 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것을 렌더링이라고 합니다.

React 요소가 DOM node에 추가되어 화면에 렌더되려면 ReactDOM.render 함수를 사용합니다. 첫 번째 인자에는 JSX로 React 요소를 인자로 넘기고, 두 번째 인자는 해당 요소를 렌더하고 싶은 container(부모요소)를 전달합니다

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

🙆‍♀️ Component

소프트웨어를 독립적인 하나의 부품으로 만드는 방법 (재사용 UI)
애플리케이션이 복잡해지더라도 코드의 유지보수 관리가 용이하며 html,css,js를
모두 합쳐서 만들 수 있게 해준다.

👉 함수로 Welcome component 구현하기

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

👉 class로 Welcome component 구현하기

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

👉 Component 사용

// 1. Welcome 컴포넌트 정의
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 2. App 컴포넌트 정의
function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

// 3. 화면에 React 요소 그려주기
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

🙆‍♀️ state

컴포넌트 내에서 정의하고 사용하는 상태 값이다.

lass Button extends React.Component {

  constructor() { //class의 instance가 생성될 때 항상 호출되는 함수(생성자)입니다. 
                    초기화할 값들을 여기서 세팅해준다고 보면 된다.
   
   super(); // super 키워드를 꼭 작성해야 React.Component 
            class에 있는 메서드(ex.render)을 사용할 수있다.

    this.state = {
      clicked: false
    }
  } 

  render() {
    return (
      <div>
        className="btn"
        onClick={()=>{this.setState({ clicked: !this.state.clicked })}}
      >
        {this.state.clicked ? '좋아요' : '싫어요'}
      </div>
    );
  }
}

ReactDOM.render(
  <Button />,
  document.getElementById('root')
);

❗️마치며

진짜 멘붕 멘붕 그저 멘붕 뿐이였다. 설치부터 개념까지 정말 이해가 어려웠다 😢
특히 state 부분은 반복적으로 봐도 어려웠다. 리액트가 익숙해지는 날이 올까 걱정이 된다. 😩