CODE_PLAN

분명 해당js는 1개밖에 없고(여기서는 Video.js파일) 이사진과 같이 되있어서 적용했었는데 안되어서

props 는 properties 의 줄임말입니다. 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props 를 사용합니다.

import React from 'react';

function HelloWorld(props) {
  return <div style={{ color: props.color }}>반갑습니다 {props.name}</div>
}

export default HelloWorld;

로 사용하면 props 내부의 값을 조회 할 때마다 props. 를 입력해야 합니다. 함수의 파라미터에서 비구조화 할당 (혹은 구조 분해라고도 불릅니다) 문법을 사용하면 아래와같이 좀 더 코드를 간결하게 작성 할 수 있습니다.

결과는 똑같이 나옵니다.

defaultProps 로 기본값 설정도 가능합니다.

참고> 

https://react.vlpt.us/basic/05-props.html

useState() 갈호안에 있는값은 초기값을 뜻하며 (5) 로되있으면 초기값이 5가 됩니다.

setNumber 로인해서 number값이 변화되는값을 나타낼수 있습니다. 

React에서 컴포넌트 파일을 import 하고 동적으로 불러오면 에러가 발생합니다. 

그럼으로 동적으로 불러오기 위해서는 React.lazy()를 사용해야 합니다.

논리 연산자(logical operator)

논리 연산자는 논리식을 판단하여, 참(true)과 거짓(false)을 반환합니다.

and, or, xor 연산자는 두 개의 피연산자를 가지는 이항 연산자이며, 피연산자들의 결합 방향은 왼쪽에서 오른쪽입니다.

! 연산자는 피연산자가 단 하나뿐인 단항 연산자이며, 피연산자의 결합 방향은 오른쪽에서 왼쪽입니다.

논리 연산자설명

참고> 

http://www.tcpschool.com/php/php_operator_logic

ex)

import Spinner from './HelloWorld .jsx';

export default () => {
  render() {
    return (
      { true ? <HelloWorld /> : null }
    )
  }
}

이때는 개발자가 되겠다고 결심했을때는 아니지만 

보고서(ppt)를 작성하고 웹사이트 개발내용중 로그인, 게시판관련된 사진만 올렸습니다.

<개발환경>

운영체제 : Windows10,Linux

사용언어 : PHP, HTML, JAVASCRIPT, CSS

개발도구 : Editplus4

데이터베이스 : MYSQL

를 사용해서 만든 웹사이트에서 게시판, 로그인관련된 사진만 올려보았습니다.

참고로 말씀드리면 밑에 사진들에서 상단 nav가 빨간색으로 되있는데 원래는 다른 모양이였는데 시간이 흐르고 썼던코드가 변경이 되어서 저렇게 나오는 모습입니다.