리액트 기초 -2일차

본 글은 강의- Minjun Kim님의 누구든지 하는 리액트를 수강하면 작성되었습니다.

누구든지 하는 리액트 #5 본격적인 리액트 코드 작성하기 ~ 

webpack

- 코드를 의존하는 순서대로 잘 합쳐서 여러개의 파일로 결과물을 만들어냄

- 예를들어 자바스크립트 파일에서 png를 사용하겠다로 import를 하면 번들링 작업을 하게 되는데 이때 특정 확장자마다 어떤 작업을 하도록 처리해준다. 빌드시 사용 경로가 문자열로 들어온다

- 자바스크립트를 여러 브라우저에서 쓸 수 있게해줌 

 

Babel 

- 자바스크립트 변환 도구이다.

 

React class 사용법

React를 만들 때에는 'react'에서 React를 import해야한다.

컴포넌트는 함수로 만들거나 클래스로 만들어주어야한다.

class App extends Component {
}

클래스로 컴포넌트 만들기

이 안에는 render가 들어가는데 render 안에는 반드시 html 태그가 들어가야한다. html태그를 작성할 때 반드시 모든 태그를 닫아주어야한다. 예를들어 <input text="">이렇게 작성하는 것이 불가능하다.

또한 두개 이상의 태그는 하나의 태그로 감싸주어야한다. 

class App extends Component {
	render(){
    	return(
        <>
        	<div>hello</div>
            <div>bye</div>
        </>
        )
    }
}

이렇게 빈 태그로라도 감싸주어야한다.

만약 태그 내에 변수를 사용하고 싶다면

class App extends Component {
	render(){
    const name='eugene';
    	return(
        <>
        	<div>hello {name}</div>
        </>
        )
    }
}

이때 변수 선언시 var, const, let 세가지를 쓸 수 있다. 보통 var은 더이상 사용하지 않고 const는 한번 선언 후 고정적인 값을 쓸 때 선언한다. let은 한번 선언 후 바뀔 수 있는 값을 사용할 때 사용한다.

조건부 랜더링도 가능하다.

class App extends Component {
	render(){
    const name='eugene';
    	return(
        <>
        	<div>{name==='eugene' && <div>hello</div>}</div>
        </>
        )
    }
}

name의 값이 eugene면 && 다음을 실행한다. 뿐만아니라 태그 안에 함수를 선언한 후 바로 사용할 수도 있다.

class App extends Component {
	render(){
    const value=1;
    	return(
        <>
        	<div>{
            	(function (){
            		if(value===1) return <div>1이다</div>
                    if(value===2) return <div>2이다</div>
                    if(value===3) return <div>3이다</div>
                })()
            }</div>
        </>
        )
    }
}

위와 같이 선언하면 함수를 생성한 후 함수 뒤의 ( )로 인해 함수가 바로 실행된다. function() 부분을 ()=>로 대체할 수도 있다. 

 

className과 css 사용법

이제 클래스를 사용하는 방법을 알아보자.

원래 html에서는 클래스를 사용할 때 태그 안에서 class를 선언하고 사용했지만 React에서는 const 변수로 선언하고 사용하는 방식으로 작성한다.

class App extends Component {
  render() {
    const style = {
      backgroundColor: "black",
      padding: "16px",
      color: "white",
      fontSize: "36px"
    };
    return (
      <>
        <div style={style}>Hello!!</div>
      </>
    );
  }
}
export default App;

주의할 점은 style 요소를 선언할 때 새로운 문자가 시작할 때마다 대문자로 써야한다. 위의 예시에서 html에서는 bakckground-color였던 것을 backgroundColor로 사용해주어야한다. 

실행 결과

또한 자바스크립트이기 때문에 수식표현을 넣을 수도 있다. fontSize: 5 +10 +'px'을 넣어도 된다.

그리고 리액트에서는 class 대신에 className이라는 것을 사용한다.

실행 결과

class라고 해도 작동되기는 하지만 className이 옳바른 표현이다.

 

주석

다음으로 React 에서 주석을 작성하려면 {/**/}로 감싸야한다.

class App extends Component {
	render(){
    	return(
        <>
        {/*주석 처리!*/}
        	<div>hello</div>
        </>
        )
    }
}