< react > 기초 다지기

이번 포스팅은 react 에 관해 포스팅 해보겠습니다.

---

react 에서는 JSX 문법을 사용합니다 

JSX 문법

Babel 사의 문법으로 XML 형태이다
외부 모듈을 이 분법을 이용해서 렌더링 컴포넌트로 선언하는코드이다.
반드시 열리면 닫혀야 하고 couple Tag, Single Tag  모두 사용가능하다
필요시 jsx 로 호출 시 전달할 수도 있다.(props, state 객체 이용)

• props : Only  Read 만 가능한 정적 데이터 전달 도구, 최상위 객체인 react 에서 모두 상속 받기 때문에                                     모든 컴포넌트에서 사용 가능하다. 단 초기 정보값만 전달하는 역할을 하기 때문에 getter 만 존재함                             ( 실제 getter 를 open 해서 주는게 아니다) 
  • 문법 :  props.전달 속성명으로  getting 한다.

 

기본 형태

import logo from './logo.svg';
import './App.css';

function App() {
  return ( // 여긴 순수하게 컴포넌트 렌더링만 하는 함수이다.
  // 로직을 구현 할거면 return() 외부에 정의 한다.
    <div className="App">
      
    </div>
  );
}

export default App;

---

컴포넌트 정의

//Hello Component 구성
//클래스와 function 두개 다 사용 가능하지만, 리액트 18 이후부터는 
//중요한 데이터 교환 수단인 hooks 라는 객체를 class 형태에서는 사용불가
//때문에 function 형태로 구현한다

// React 를 상속받기 위해 React import 
import React from "react";

function Hello(){
  // 랜더링할 내용 정의 함수 return();
  //반드시 이 내부에 컴포넌트를 정의해야만 랜더링이 된다.
  return(
    <div>안녕하세요</div>
  );
}
export default Hello;

생성한 컴포넌트 이용한 코드

import logo from './logo.svg';
import './App.css'; //  자바 스크립트의 모듈화에 따른 문법, 각 모듈을 코드 내로 import 시 사용. 
import Hello from './hello';
function App() { 
 
  const name = "98kg";
  return (
    <div className="App">
      <Hello/>
      <div style={style}> 
        {name} 님.
      </div>
      <Hello/>
      <Hello/> 
      <div className='mycls'>
        <h2>이 내용은 App 에서 코딩한 내용</h2>
      </div>
      
      
    
    </>
    </div>
  );
}

export default App;

위에 코드를 보면 변수에 담긴 값을 출력할 땐 {} 를 이용하여 호출해야 하는 것을 볼 수 있을 것이다.

그냥 찍어도 출력이 되긴 하지만 일반적으로 이렇게 사용되니 이 방법을 기억하자.

 

export default app 처럼  이 컴포넌트가 타 컴포넌트에 호출되어 사용되려면

이전처럼 export default 함수명을 해줘야 모듈 컴포넌트가 된다.

export default App; // 이부분!!

---

지금 리액트는 jsx 문법을 사용하고 있기때문에 html의 style , css를

내부에 정의 시엔 문법이 다르다.
먼저 인라인 스타일은 반드시 객체 형태 {} 로 작성해야 한다.

그리고 - , _ ,공백 등은 지원되지 않으며,
반드시 came1 표기법으로 해줘야 정상적으로 랜더링 된다.
  ex) css: background-color ->  jsx : backgroundColor

css class 를 설정시에도 다음 조건을 만족해야한다.
*노드에 class = 가아니라, className =  이라는 속성으로 설정해야한다.

inline style 정의

  const style ={
    backgroundColor : 'yellow',
    color : 'aqua',
    fontSize : 24,
    padding:'1rem'
  }

- <></> : 노드를 묶어 쓸 때 이용한다.

---

props 를 이용한 코드

import logo from './logo.svg';
import './App.css'; //자바스크립트의 모듈화에 따른 문법 .각 모듈을 코드내로 import 시 사용.
import Hello from './hello';


function App() {

  const style = {
    backgroundColor : 'yellow',
    color : 'aqua',
    fontSize : 24,
    padding : '1rem'
  }
  

  
  const name = "98kg";
  return (
    <div className="App">
    

      {/* props를 이용해서 하위 컴포넌트에 (초기)값 전달 해볼게요. */}
      <Hello name="98kg" color="blue"/>
    </div>
  );
}

export default App;

hello 컴포넌트에 props 를 이용하겠다는 의미라서 hello.js 로 이동해서 재정의해주자.

import React from "react";
function Hello(props){
  return(
    <div style={{color:props.color}}>안녕하세요.{props.name}</div> 
  );
}
export default Hello;

 

<div style={{color:props.color}}>안녕하세요.{props.name}</div>

이 부분을 보면,

객체를 만들지 않고 props를 바로 가져다 쓸 땐 { { } }이렇게 두개로 감싸야하는 걸 볼 수 있다.

그리고, props. ~ 처럼 문법이 사용되는 것을 볼 수 있다.

 

 <Hello name="pink" fontSize="15px"/>

이렇게 app.js 에 추가하면 name 인 98kg 가 안 뜨는 걸 볼 수 있다.

이걸 defaultProps 라는 문법을 통해 기본값을 지정할 수도 있다

hello.js 로 가보자

import React from "react";

function Hello(props){
  
  return(
    <div style={{color:props.color}}>안녕하세요.{props.name}</div> // 객체를 만들지 않고 프롭스를 바로 가져다 쓸 땐 { {} }이렇게 두개로 감싸야한다.
  );
}
//default props : props 로 넘어오지 않는 파라미터가 존재하는 경우 기본값을 세팅하거나
//또는 파라미터와 상관없이 특정 속성의 기본값을 초기화 하는 기본 props 
// 문법 : 컴포넌트이름.defaultProps ={}
Hello.defaultProps={
  name : '어쩔'
};
export default Hello; //  모듈화 선언

이렇게 아래에 문법에 맞게 정의하면 어쩔이라는 이름이 기본적으로 출력되는 것을 볼 수 있다.

---