[React] 간단한 웹-앱 만들기 - 기본 문법 공부 (1)

 

먼저.. App.js를 쳐다봤다.

function App() 안에 return이 있고 그 안에 HTML 이 있다 (????!?!?!)

 

기본 문법을 익히며 사용해보는 중.

*Javascript 생성

//Hi.js 
import React, { Component } from "react"; 
. 
. 
. 
export default Hi;

만약 새로운 javascript 파일을 만들 경우, 이렇게 import 와 동시에 export를 꼭 써주어야 한단다.

(아직 뭘 import 해야할 지 잘 몰라서 컴포넌트 공부하기 위해 컴포넌트 임포트 해놓았음.)

 

*Props 사용

//App.js
import logo from "./logo.svg";
import "./App.css";

function App() {
  return (
    <div className="App">
      <Namep name="Jihun"/>
      <Namep name="Dana"/>
    </div>
  );
}

//사용자 정의 Element : 첫글자를 대문자로.
// 맨 위의 App()에서, <Name name="jihun"/> 이런식으로 사용 가능! 
function Namep(props) {
  //props : 부모에게 넘겨받은 값. 해당 값을 수정해서는 안됨.
  return <h1>Hi {props.name} !</h1>;
}

export default App;

사용자 정의 Element를 설정할 수 있는데, 첫글자는 대문자로 설정하고, 리턴 안에 HTML 문법 사용해서 넣어준다.

props의 경우는 넘겨받는 값을 뜻하는데, 수정이 이루어져서는 안된다.

위에 보면 props는 넘겨받는 값을 여러개로 해서 여러번 사용 가능하다. Polymorphism...?^^ㅎ....

 

아래와 같은 방법으로도 사용 가능하다.

 

//Hi.js
import React, { Component } from "react";

class Hi extends React.Component {
    //default props: 값을 입력하지 않는 경우 또는 값이 없는 경우 기본으로 나오는 props를 설정 가능.
  static defaultProps = {
    name: "Default name",
  };

  render() {
    return (
      <div>
        <h1>Hi {this.props.name} !</h1>
      </div>
    );
  }
}

export default Hi;

//App.js
import React, {Component} from 'react';
import Hi from './Hi'

class App extends React.Component {
  render() {
    return (
      <Hi name="Jihun"/>
    );
  }
}
export default App;

*State 활용

//Hi.js
import React, { Component } from "react";

class Hi extends React.Component {
  // construnctor 사용해서 초기 state를 지정해줄 수도 있다.
  constructor(props) {
    super(props);
    this.state = {
      name: "Default name",
    };
  }
  componentDidMount() {
    // 컴포넌트가 마운트 된 직후 호출. 비동기적으로 호출되는 것을 방지!
    this.setState({
      name: this.state.name + " !!! ",
    });
  }
  render() {
    return (
      <div>
        <h1>Hi {this.props.name} !</h1>
      </div>
    );
  }
}
//결과는 Hi Default name !!! 가 되는 것이다.

export default Hi;

constructor를 사용하는 경우, state를 사용하게 되는데 이 경우 state를 통해 값의 변경이 가능하다.

setState 를 활용하여, props의 값이 아닌 state의 값을 변경해주는 것...!