고급컴퓨터학현장실습대비 1) 리액트 2강

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


// JSX(html같은거 - 이후 js로 변환됨)
/*
예시 - function App() {
  return (
    <div>
      Hello <b>react</b>
    </div>
  );
}
의 경우,  
function App() {
  return React.createElement("div", null, "Hello", React.createElement("b", null, "react"));
}
로 변환됨.
보면 알 수 있듯, div Element 하나에 b형 Element가 들어가는 것을 알 수 있다. 이런 식으로 계층을 구성하는듯?
*/

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

위가 기본형임. 여기서,

const 변수를 통해서 사용해보겠다. 변수는 {변수명}을 통해 사용 가능.

function App() {
  const name = '리액트';
  return (
    <>
      <h1> {name} 안녕 ! </h1>
      <h2> 잘 작동하니? </h2>
    </>
  );
}
export default App;

다음으로 조건부 연산자다.

name === ' 리액트'라면, && 뒤의 것을 실행

//조건부 연산자 : name === '리액트'라면 && 뒤의 것을 실행
function App() {
  const name = "뤼액트"
  return <div> {name === '리액트' && <h1> 리액트입니다. </h1>} </div>;
}

export default App;

리액트 컴포넌트에선, 함수에서 undefined만 반환해서 렌더링하면, 오류가 발생한다.

예시

function App() {
	const name = undefined;
	return name;
    
    //대체안
    return name || '값이 undefined 입니다.';
    
    //jsx 내부에서 undefined를 렌더링한 예
    return <div>{name}</div>;
    
    //name 값이 undefined일 때, 보여주고픈 문구가 있다면
    return <div>{name || '리액트'}</div>;
}

export default App;

따라서, 대체안을 통해 수정해야 한다.

그러나, name값이 undefined일 때 렌더링 하는 것은 괜찮으며,

마지막은 undefined일 때 보여주고픈 문구가 있다면 사용한다.

---

리액트에서 DOM요소에 스타일을 적용할 때는, 문자열 형태가 아니라 객체 형태로 넣는다.

아래는, 검은배경에 하늘색글자로 리액트를 작성하는 형태.

function App() {
	const name = '리액트';
    const style = {
		backgroundColor : 'black',
		color : 'aqua',
		fontSize : '48px',
		fontWeight : 'bold',
		padding : 16
    };
	return <div style = {style}>{name} </div>;
};

이를 style을 따로 지정하지 않고,

return (
	<div
    	style = {{
        	backgroundColor : ...
            ...
        }}
    >
    	{name}
    </div>
);

처럼 표기 가능.

 

일반 HTML에서는 CSS클래스를 사용할 땐, <div class = "myclass"></div>와 같이 class란 속성을 설정한다.

그러나 jsx에서는 className으로 설정함.

아래의 과정을 거쳐보면,

1. src 디렉토리 안의 App.css에서 내부를 다 지우고, 새 css클래스를 작성
.react {
	background : 'aqua';
    color : 'black';
    font-size : 48px;
    font-weight : bold;
    padding : 16px;
}
이는 기존 App컴포넌트에서 인라인 스타일에 사용한 폰트갯과 배경색을 뒤바꿨다.

2. App.js파일에서 App.css를 불러온 뒤, div요소에 className값을 지정한다.
function App() {
	const name = '리액트';
    return <div className = "react">{name}</div>;
}

이렇게 하면,글씨가 짙은 검정으로, 배경은 aqua색으로 default가 되는 걸 볼 수 있다.

 

<input>은 반드시 닫자.