리액트의 구조도와 기본

리액트를 설치하면 다음과 같은 형태로 나오는데,

구성도

여기에 있는 public이 외부로 보여지는 부분이고, src는 소스 부분으로 여겨진다.

외부에서 가장 먼저 보여지는 부분은 index.html로 이곳에 있는 id="root"로 다른 부분을 띄워준다.

 

이 root는 src의 index.js와 연결이 되고, 이 index.js는 App.js와 연결이 된다.

그렇기 때문에 실질적으로 React를 활용하기 위해서 입력하는 부분은 App.js인 것이다.

 

맨 처음 App.js를 들어가면 이런 형태로 되어있는데,

여기서 <header> ~ </header>의 내용은 미리보기 화면으로 날려도 문제는 없다.

이곳을 날리고 나서 내용을 작성하게 되는데,

 

App()하고 return의 사이 공간{빨간 네모}에 JavaScript를 입력하며, <div>와 </div> 사이 공간{주황 네모}에 HTML을 입력한다. 그리고 css는 태그의 형태로 입력하거나 App.css 파일에 따로 입력하면 된다.

 

React를 하기 위해서는 간단한 규칙이 있는데, 먼저 return 안에서의 시작과 끝은 같은 태그여야 한다.

예를 들어

import './App.css';

function App() {
	return(
    	<h1>안녕</h1>
        <span>안녕하세요</span>
        );
    }
    
export default App;

와 같이 return의 시작과 끝에 위치하는 열기 태그와 닫기 태그가 불일치하면 안 된다. 그렇기 때문에 대부분은 div 태그를 써서 시작과 끝을 div태그로 묶는다. (꼭 div태그로 묶지 않아도 된다.)

 

또, React의 속성명은 대소문자를 엄격히 따지며, 카멜 케이스로 쓴다. 예를 들어서 onclick같은 경우는 기존 자바스크립트에서는 대소문자 아무렇게나 써도 상관이 없지만, React에서는 onClick으로 써야하며, CSS의 font-size 속성 같이 스네이크 케이스로 되어있는 속성명 같은 경우 카멜 케이스인 fontSize같이 변경해서 써야한다.

 

그리고 React의 JavaScript는 함수 표현식(람다식)을 많이 사용한다.

// 함수 선언식
test1(); // 호출 실행 보류
function test1() {
	alert('test1');
    }
    
// 함수 표현식
test2(); // 오류 발생
let test2 = function () {
	alert('test2');
    }
    
// 람다식
let test3 = () => {
	alert('test3');
    }

함수 선언식과 함수 표현식의 차이는 함수 선언식에서 선언 전에 호출한 함수는 선언이 안 되었기 때문에 선언이 될 때까지 실행을 보류한다. 그렇기 때문에 오류가 나지 않는다. 하지만, 함수 표현식은 함수 자체를 변수에 넣기 때문에 변수가 정의되기 전에 호출하면 오류가 발생한다.

 

또, 함수 표현식의 'function'을 '=>'로 바꾼 것이 람다식이다. 즉, 람다식의 앞에 소괄호는 함수 표현식의 매개변수이다. 이 소괄호는 매개변수가 1개일 경우에만 생략이 가능하며, 매개변수가 없거나 2개 이상일 때는 반드시 소괄호를 만들어야 한다. (1개일 때는 val => { }의 형태로 생략이 가능한 것이다. 보통 이벤트의 명칭을 써서 e => { } 형태로 쓸 때 소괄호를 생략한다.)

 

반응형

 

그리고 React에는 이것을 일회성으로 람다식을 많이 쓰고 있기 때문에 아예 버튼 안에 넣는 경우도 흔하며, 함수의 이름 뿐만 아니라 변수의 이름을 넣어도 작동한다. 이 경우에는 중괄호로 묶어야한다. 즉 변수 이름이 test일 경우에는 사용할 떄는 {test}로 사용한다. 그리고 람다식 자체를 중괄호에 넣어도 똑같이 작동된다.

 

import './App.css';

function App() {

  const test = () => {
    alert('test');
  }

  return (
    <div className="App">
      <input type="button" value="test" onClick={test} />
      <input type="button" value="test2" onClick={() => {alert('test2')}} />
    </div>
  );
}

export default App;

 

React에서는 CSS를 Object 배열을 Json의 형식 만든 형태로 쓰는데, 이 형식은 중괄호로 묶어서 여러 개의 값을 표현할 때 사용한다 그렇기 때문에 간단히 쓸 때는 그 배열(중괄호로 묶여있는 형태)를 중괄호 부분에 통채로 옮겨서 쓴다. 그래서 CSS를 함수 자체에서 사용할 때는 중괄호 2개를 쓰고 쓰는 형태가 되는 것이다. 

 

import './App.css';

function App() {

  const testStyle = {
    fontWeight : "bold",
    color: "blue"
  }

  return (
    <div className="App">
      <h1 style={testStyle}>안녕</h1>

      <h1 style={{fontWeight : "bold", color: "red"}}>안녕</h1>
    </div>
  );
}

export default App;

 

참고로 React에서의 css는 카멜 케이스를 쓸 뿐 아니라, 값에는 따옴표로 묶어주며, 나눌 때는 세미콜론(;)이 아닌 쉼표(,)로 구분해줘야 한다.