React 기본 문법 연습

본격적인 React 실습을 들어가며 React의 기본 구조와 기본 문법을 이해하기 위해 연습을 하게 되었다.
 

React는 App.js에서 작업을 한다 

 

 
function의 return 내부 구문이 JSX 기반의 컴포넌트 구문이다.
그리고 App.js는 index.js에 import되어 활용되고 있었다.
 

 
 
 
 

function App( ) 함수 외부 함수 호출

 
뭔가를 작업하고 싶은데 코드의 양이 많거나, 성격이 다르거나, 다른 곳에서 함수를 호출하고 싶을 때, 다른 위치에 Class 또는 function을 만들어서 function App( )에서 호출한다.
 

• Class 컴포넌트 type 작업

import { Component } from "react";

//클래스 컴포넌트 (유닛화) : //조립식 프로젝트에서 효과적으로 사용할 수 있다
class Subject extends Component {
  render(){ //함수에서는 render 필요없이 return만 해주면 된다.
    return (
      <header> {/* root? 는 꼭줘야함 할거 없으면 그냥 <> </> 만 해주기 */}
        <h1>머리글 : 웹 문서</h1>
      </header>
    );
  }
}

function App() {//자바스크립트에 html처럼 만듬 -> JSX
  return ( 
    <div className="App"> {/* JSX 주석 */}
      우히히
      <Subject></Subject>{/* 컴포넌트 호출 */}
    </div>
  );
}

export default App;

 
함수 외부에서 Component를 상속받은 클래스를 생성하였고 클래스 내부에서 코드를 작성한 다음, App 함수에서 
<Subject></Subject>와 같이 클래스명으로 호출한다.
 
 

• Class 컴포넌트 type 작업 (실행 결과)

 
 
 

• function 컴포넌트 type 작업

function Welcome(){
  return(
    <article>
      글 기사 내용
    </article>
  );
}

function App() {//자바스크립트에 html처럼 만듬 -> JSX
  return ( 
    <div className="App"> {/* JSX 주석 */}
      우히히
      <Subject></Subject>{/* 컴포넌트 호출 */}
      <hr/>{/* JSX 문법에서는 무조건 닫아줘야한다 */}
      <Welcome></Welcome>
    </div>
  );
}

export default App;

 
외부에서 별도의 함수를 만들고 return 할 코드를 작성한 후, App function 내부에서 <Welcome></Welcome> 과 같이 함수명으로 호출한다.
 
 

• function 컴포넌트 type 작업 (실행 결과)

 
 
 
 

function 방식에서 parameter 전달

 

function Welcome(props){ //js //자식 컴포넌트
  let kbs = "공영방송"; //js
  return(//이 밑부터는 jsx
    <article>
      {props.who} 글 기사 내용 {/* 넘겨받은 파라미터를 나타내려면 { }로 파라미터명을 감싸줘야한다 */}
      {kbs}
    </article>
  );
}

//props : 부모가 자식에게 던져주는 값, 무조건 이 이름을 쓸 필요는 없지만 주로 이 명칭을 쓴다

function App() {//자바스크립트에 html처럼 만듬 -> JSX //부모 컴포넌트
  return ( 
    <div className="App"> {/* JSX 주석 */}
      우히히
      <Subject></Subject>{/* 컴포넌트 호출 */}
      <hr/>{/* JSX 문법에서는 무조건 닫아줘야한다 */}
      <Welcome who="나길동"></Welcome>
    </div>
  );
}

export default App;

 
App function에서 who의 값을 Welcome function에서 전달 받고 내용에 적용하여 App function의 본문에서 나타내게 된다.
 
props 란? : 부모가 자식에게 던져주는 값이다, 무조건 이 명칭을 쓸 필요는 없지만 주로 이 명칭을 쓴다.
넘겨받은 파라미터를 나타내기 위해서는 { } 중괄호로 파라미터명을 감싸줘야 한다.
 
 

• 실행 결과

 
 
 

App.js가 아닌 다른 파일 및 경로에  Class 또는 function 을 생성하여 App.js에서 불러오기

 
나의 경우에는 src 폴더에 mydir이라는 폴더를 생성하고 그 폴더에 Navdata.js라는 파일을 생성하여 실습해보았다.
 

import React, {Component} from 'react';

class Navdata extends Component {
  render(){
    return(
      <ul>
        <li><a href="https://www.naver.com">네이버</a></li>
        <li><a href="https://www.daum.net">다음</a></li>
      </ul>
    );
  }
}
export default Navdata; //다른 파일 어디서든 불러다 쓸 수 있다.

 
실습해볼 class를 작성해 보았다.
export default Navdata; 는 다른 파일 어디서든 불러다 쓸 수 있도록 export 하는 것이다.
 

import { Component } from "react";
import Navdata from "./mydir/Navdata";

중복 코드 생략...

function App() {//자바스크립트에 html처럼 만듬
  return ( 
    <div className="App"> {/* JSX 주석 */}
      우히히
      <Subject></Subject>{/* 컴포넌트 호출 */}
      <hr/>{/* JSX 문법에서는 무조건 닫아줘야한다 */}
      <Welcome who="나길동"></Welcome>
      <br></br>
      <Navdata></Navdata>
    </div>
  );
}

export default App;

 
Navdata.js 를 import 한 후 , App function 내부에서 <Navdata></Navdata> 로 호출해주었다
 

• 실행 결과

 
 
※ 알아가면 좋은 점! import 할 때, from 앞의 이름은 마음대로 설정할 수 있다. 그러면 그 이름으로 호출해주면 된다.

 
 
 

다른 파일에서 parameter 전달하기

 

import { Component } from "react";
import Navdata from "./mydir/Navdata";

중복 코드 생략...

function App() {//자바스크립트에 html처럼 만듬 -> JSX //부모 컴포넌트(Main)
  return ( 
    <div className="App"> {/* JSX 주석 */}
      우히히
      <Subject></Subject>{/* 컴포넌트 호출 */}
      <hr/>{/* JSX 문법에서는 무조건 닫아줘야한다 */}
      <Welcome who="나길동"></Welcome>
      <br></br>
      <Navdata msg="부모가 정보 전달" msg2="전달2"></Navdata>
    </div>
  );
}

export default App;

 
App.js에서 함수를 호출할 때, <Navdata msg="부모가 정보 전달" msg2="전달2"></Navdata> 이렇게 파라미터를 넘겨주고
 
 

import React, {Component} from 'react';

class Navdata extends Component {
  render(){
    return(
      <ul>
        <li><a href="https://www.naver.com">네이버</a></li>
        <li><a href="https://www.daum.net">다음</a></li>
        <strong>{this.props.msg}</strong>
        <i>{this.props.msg2}</i>{/*readonly*/} 
      </ul>
    );
  }
}
export default Navdata; //다른 파일 어디서든 불러다 쓸 수 있다.

 
Navdata.js 에서 {this.props.(id)} => {this.props.msg}, {this.props.msg2} 로 출력해줄 수 있다.
 

• 실행 결과

 
 
 
 
위와 같이 React 첫시간에 기초 문법을 연습해보았다~