React(생활코딩)_3일차_리액트 컴포넌트 만들기

Lina Hongbi Ko·2023년 8월 9일

React_생활코딩

목록 보기

4/23

저번 시간에는 리액트를 이용해서 css파일을 어떻게 사용하고 배포하는지에 배웠다면 이제 본격적으로 컴포넌트를 어떻게 만드는지 배워보자.

✏️ 컴포넌트 만들기 _ 1

: 나는 이제까지 html에서 시멘틱 태그를 이용해 웹페이지를 만들었고, 반복되는 코드들이 있으면 복붙해서 썼다. (예를 들면 계속 반복되는 nav나 header..) 그래서 반복되는 코드를 어딘가에 써놓고, 어딘가에서 갖고 와서 쓰면 좋겠다는 생각을 이제까지 해왔는데 이것이 리액트에서 실행된다니!! 이것은 정말 획기적이다. 개발자의 일을 덜어주기 위해 이 라이브러리를 만든 페이스북에게 감사하다..!

무튼, 이런 수고로움을 덜어주기 위해 우리는 컴포넌트를 만들 수 있다.

앞에서 실습했던 App.js를 다시 보면

class App extends Component {
	render() {
    	return (
        	<div className="App">
            	Hello, React!!
            </div>
        )
    }
}

리액트가 갖고 있는 Component라는 클래스를 상속해서 새로운 App클래스를 만들고, render라는 메서드를 가지고 있는 것을 알 수 있다.

그럼 이 틀을 복사해서 간단한 컴포넌트를 만들어보자.

class Subject extends Component {
	render() {
    	return (
        	<header>
            	<h1>WEB</h1>
                world wide web!
            </header>
        );
    }
}


class App extends Component {
	render() {
    	return (
        	<div className="App">
            	<Subject></Subject>
            </div>
        )
    }
}

코드를 잠깐 살펴보면, 위에 Subject라는 컴포넌트를 클래스를 선언해서 만들었다. 그리고 render(){} 메서드 안에 return문 속 원하는 태그들을 넣어서 컴포넌트를 구성했다. 앞에서 말했듯, 컴포넌트를 만들때는 반드시 하나의 최상위태그로 시작해야한다는 것을 잊지말자. 여기서는 header 태그가 최상위 태그이다.
그럼 마찬가지로 App 컴포넌트의 최상위태그는 div이겠지?

책에서도 계속 강조하듯이,
반드시 하나의 태그만 리턴할 수 있다는 사실을 기억해야한다.

그리고나서 실행 중인 웹페이지를 들어가 개발자도구를 보면, div App안에 Subject에서 구성한 태그들을 볼 수 있다.

여기서 말하길, 웹브라우저는 리액트라는 기술이 있는지 모른채 리액트가 최종적으로 웹브라우저에게 변경된 HTML코드를 공급하기 때문에 웹브라우저는 리액트로 만든 컴포넌트 내용을 이해하지 못한다.
리액트는 JSX(JavaScript XML)이라는 언어를 이용해 만들어졌는데, JSX로 코드를 작성하면 create-react-app이 알아서 자바스크립트 코드로 변환해준다고 한다.

✏️ 컴포넌트 만들기 props _ 2

: 앞에서는 기본적으로 컴포넌트를 어떻게 만드는지 살펴보았다. 생활코딩님은 리액트의 컴포넌트를 '정리정돈의 도구'로 봤으면 좋겠다고 한다. 그 말이 딱 맞는 것 같다. 널부러진 코드들을 한데 모아서 다시 깔끔하게 작성할 수 있으니 그 말이 맞다.

우리가 html에서 태그를 보면 속성을 볼 수 있다. 예를 들어 a태그의 속성은 href, target 등 여러가지를 우리는 알고 사용한다.
그렇다면 html태그 이름이라는 공통점과 속성이라는 차이점을 리액트에서는 쓸 수 없을까?

가능하다.

우리가 만든 컴포넌트도 html의 태그 이름, 속성값을 사용하는것과 같은 원리로 속성값을 붙여서 컴포넌트를 다르게 보이게 만들 수 있다.

앞에서 실습한 것으로 만들어보자.

// App.js파일

//,,앞의 내용 생략,,

class Subject extends Component {
	render() {
    	return(
        	<header>
            	<h1>{this.props.title}</h1>
                {this.props.sub}
            </header>
        );
    }
}

class App extends Component {
	render() {
    	return(
        	<div className="App">
            	<Subject title="WEB" sub="world wide web!">
            </div>
        )
    }
}

Subject 컴포넌트 안의 코드를 보면 h1태그 안에 중괄호 { }를 볼 수 있다. 이것은 자바스크립트 코드가 아니라 JSX문법이다.
그리고 this를 이용해서 자기자신(자신객체)를 지정해준다. 그다음, props를 넣어서 속성값을 나타내주는 키워드를 적는다. props는 html의 속성(attribute)와 비슷한 원리를 가진다. props 뒤에는 원하는 값을 사용하면 된다. 여기서는 title과 sub를 지정했다.

이렇게 props를 이용하면 항상 같은 내용의 컴포넌트만을 가져오는것이 아니라 title과 sub를 이용해서 title값을 지정해주고 sub값을 지정해주면 컴포넌트의 입력값이 되어서 그에 따라 달라지는 출력값이 화면에 표시 된다.

React Developer Tools

: 컴포넌트를 어떻게 만드는지 알아보았으면 이제 리액트를 이용해서 컴포넌트를 만들고 또 그 상태를 아는 것도 중요하다. 이 때 사용할 수 있는 것이 'React Developer Tool'.

생활코딩님은 뭔가를 공부할때 가장 중요하게 생각하는 요소 몇가지가 있다고 했다. 그 중, 두가지를 말하셨는데

우리가 알고자 하는 것에 대한 특성을 누군가가 잘 정리정돈한 설명서를 볼 줄 아는 것
현재상태를 측정하고 분석하는 것

요렇게 책에 적어주셨다.

사용설명서는 너무 장황하고 복잡해서 사실 읽기가 어렵기 때문에 우리는 질문하는 것과 검색하는 것을 통해 스스로 그것을 보고 알아내는 능력을 키워서 설명서를 잘 볼 줄 알아야 한다고 강조했다. 개발자에게 이런 능력은 필수이고 앞으로 발전하는데 이는 좋은 개발자가 되기 위한 필수적인 밑거름 아닐까..?

그리고 두번째를 위해 현재상태를 알아낼 수 있는 도구를 설명했다.
크롬브라우저의 extention인 'React Developer Tools'를 설치하는 것이다.

https://chrome.google.com/webstore

여기 들어가서 'React Developer Tools'를 검색하면 설치가능하다. 설치하고나서 브라우저 우측 상단의 아이콘이 추가되는 것을 볼 수 있다. 그리고 개발자도구를 실행해서 먼저 [Element]에서는 볼 수 없었던 컴포넌트 태그들을 [Components]라는탭 (설치한 확장프로그램에 의해 개발자도구에 추가되어있음)을 누르면 우리가 만든 앱의 컴포넌트를 볼 수 있다.

실제 태그를 보고싶을땐 [Element] 탭을 쓰면 되지만, 리액트 코드를 분석할 때는 [Component] 탭을 보면 된다. 이 탭을 누르면 컴포넌트들에 대한 정보를 볼 수 있고, 또 수정하면서 직접 눈으로 확인할 수도 있다.

출처: 생활코딩! React 프로그래밍 책

Lina Hongbi Ko

프론트엔드개발자가 되고 싶어서 열심히 땅굴 파는 자

이전 포스트

React(생활코딩)_2일차_리액트 시작_2

다음 포스트

React(생활코딩)_3일차_리액트 컴포넌트 만들기