React - 3강, 4강

저번에 작성한 Hello React!를 프린트 하는 코드는 컴포넌트를 렌더링 기능만 수행한 것으로, '컴포넌트로서의 기능이 약하다'라고 평가할 수 있습니다. 자바에서 기본생성자가 생략되듯이, React에서는 render()라는 함수가 생략될 수 있기 때문에, React는 기본적으로 함수를 정의하는 것 만으로도 컴포넌트를 명시할 수 있습니다.

아래 코드는 기본 함수를 작성하여서 render()함수가 생략된 컴포넌트를 생성하는 예시코드입니다.

//html
<div id="root"></div>

//css
.blue{ //.class명{내용 작성}
  color : blue;
}

.red{
  color : red;
}
//JS
function formatInfo(student) {
  return student.name + "[" + student.id + "]";
}


const student = {
  id: "1107074",
  name: "Hyeonji",
  color: 'blue'
}

const element = (
  <h3 className={student.color}>
     //중괄호 : 함수형 js를 사용하겠다는 표시 
  //(JSX: 속성 및 내용으로 들어갈수 있음, camelCase사용)
    {formatInfo(student)}
  </h3>
);

//작성한 함수를 호출하면서 파라메터로 실행할 JSclass명과 html아이디를 지정하여 주입
ReactDOM.render(element, document.getElementById('root'));

//렌더링 확인용 시간측정 함수 작성
function tick(){
  const element = (
    //내장함수를 사용하여 현재 시각을 구하고 String으로 출력
    <h3> 현재 시각은 [{new Date().toLocaleTimeString()}] 입니다. </h3>
  );
//확인용, 추후 개선 대상
  ReactDOM.render(element, document.getElementById('root'));
}
//1000 = 1초 마다 1번씩 tick함수 실행
setInterval(tick, 1000);



function Show(props/*부모 컴포넌트에서 
//자식 컴포넌트로 데이터 전달 시 사용*/){
  return(
    <h3>
      Name is {props.name}
    </h3>
  );
}
//부모-자식 컴포넌트 계층적 사용 & 재사용성 예시 코드
function App(){
  return(
    //1개 이상의 jsx태그 사용 시 
    //main이나 div등의 태그로 감싸야지 오류가 안남
    <main>
      <Show name="김현지"/>
      <Show name="김한수"/>
      <Show name="eddle"/>
    </main>
  )
}

//컴포넌트를 일반적인 html태그처럼 쓸 수 있게 됨
const element = <Show/>;

//함수의 파라메터 값이 전달되지 않았을 때 default값 설정 가능
//함수명.default파라메터명 = {속성 : 값}
Show.defaultProps = {name : '코드펜'}

//render함수는 어떤 변수나 함수를 
//첫번째 파라메터로 받을 수 있기에 
//element자리에 <Show name="김현지"/>라고 써도 
//동작이 된다.
ReactDOM.render(<App/>, document.getElementById('root'));

출처 https://youtu.be/kjnVKNmT_xE