43일차 TIL 210506 react

1. 리액트를 만났다. 우리 친해져요.

  • 프론트앤드 라이브러리
  • 요즘 웹페이지는 유저와의 인터렉션, 수많은 상태 관리가 필요하다.
  • 리액트는 컴포넌트로 구성 되어있는데, 컴포넌트란 하나의 의미를 가진 독립적인 단위 모듈이다. html을 반환하는 함수
  • 컴포넌트를 사용하는 경우 재사용성, 직관성이 좋아진다.
  • 두개의 컴포넌트를 렌더링 할수는 없다.
ReactDOM.render( <App /> <Potato />, document.getElementById('root'));
//❌️
  • 리액트 어플리케이션은 한 번에 하나의 컴포넌트만 렌더링 한다.
  • (기준이 되는) 하나의 application 안에 많은 component를 넣을 수 있다.
  • 그리고 이러한 component 안에 더 많은 component 를 Import 할 수 있음
  • 기본시작 
    npx create-react-app 설정할앱네임
cd 설정할앱네임
npm start

1-1 함수형 / 클래스형 컴포넌트

//함수형
import React from "react"

function Food (props) { 	// props는 obj
// 인자로 👉️ {name} or props.name or props 처럼~ 편한 방식으로!
  console.log(props) 		// {name: "kimchi", something: true, lala: Array(5)}
  console.log(props.lala) 	// [1, 2, 3, "jung", "eun"]
  console.log({name}) 		// {name: "kimchi"}

  return (
  <h1> i like {props}</h1> 	// 이 경우, 객체가 react child로 유효하지 않다는 에러가 뜬다.
  <h1> i like {props.lala}</h1> // i like 123jungeun // 배열의 el들이 모두 string type으로 출력된다.
  <h1> i like {props.lala[3]}</h1> // i like jung // 넘겨주는 데이터에서 필요한 데이터를 꺼낼 수 있다.
  <h1>  i like {name}</h1> 	// i like kimchi
  )
}

function App() {
  return (
    <div className="App">
      hello willy❤️!
      <Food 
        name = "kimchi"
        something = {false}
        lala = {[1,2,3,"jung", "eun"]}
        />
        // Food 컴포넌트에 / name이라는 property name을 사용해서 / "kimchi"라는 value를 주겠다.
    </div>
  );
}

export default App;

//클래스형
class App extends React.Component {
  constructor(props) {
    super(props)
  }
  
  render() {
    return (
      <div>Hello Willy</div>
    )
  }
}

1-2. 클래스형 - constructor

  • Component 를 생성할떄, state 값을 초기화 하거나 메서드를 바인딩 하기 위해 사용된다.
  • super(props) 로 상속을 받아온다. super 전에 this는 허용되지 않기 때문에 반드시 선언 필요
  • this.state : 생성자 내에서만 직접 할 당 할 수 있다.
  • this.state를 변경하기 위해 사용하는것이 setState
  • 생성자 내에서는 외부 api를 호출할 수 없기에 생성자 밖에서 componentDidMount()를 통해서 해줄 수 있다.

1-3. rendering

  • react element 는 DOM 태그로 나타낼 수 있다. const element = <div> 바넷싸 </div>
  • react element 는 내가 생성한 컴포넌트로도 나타낼 수 있다. const elemtn =
  • 리액트가 위와 같이 사용자가 정의한 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달 한다.
  • 이 객체를 props 라고 한다.

2. 리액트는 es6 문법을 사용한다.

  • Destructiong : 구조분해 할당
  • Spread operator : 배열이나 유사 배열 형태의 자료를 퍼지게 해주는 기능
  • Rest parameters : 함수의 마지막 인자들을 제한 없이 배열로 받아 처리할 수 있는 기능
  • default parameters : 파라미터를 기본값을 설정하는것
  • arrow function : 화살표 함수
  • for of loop

Updated: