따라하기 실습, 리액트편
04 리액트 컨포넌트 파일 알아보기
먼저 사전적 의미에 대해 알아보자
프로그램이나 구조물에서 식별 가능한 '일부분'이다. 대체로 특정 기능이나 이와 관련된 기능들의 조합을 제공한다.
프로그래밍 설계에서 시스템은 모듈로 구성된 컴포넌트로 나뉜다. 특히 객체지향 프로그래밍과 분산객체기술에서의 컴포넌트는 재사용이 가능한 프로그램 빌딩 블록을 말한다. 예를들어 GUI 중 버튼 하나, 소형 이자 계산기, 특정한 DBMS 인터페이스와 같은 단위를 말한다.
컴포넌트는 컨테이너라 불리는 환경 내에서 동작하는데 이때 컨테이너란 웹페이지, 브라우저 또는 워드프로세서 등을 들 수 있다. 컴포넌트는 상호 동작을 위해 자신을 공시할 수 있는 속성과, 이벤트 처리, 영속성 등을 가지고 있다.
앞서 실습한 리액트 번들 코드에서 보면 동그라미 친 부분이 컴포넌트에 해당하고
이 부분은 HTML과 비슷한 JSX로 작성되어 있다. JSX는 자바스크립트를 확장한 문법으로 HTML 과 비슷한 XML 형태의 코드로 작성을 하면 이를 React.createElement 를 사용하는 자바스크립트 형태로 변환시켜준다.
코드는 return( 여기에 ); 작성하면 된다.
이때 몇가지 규칙이 있는데,
1. 마크업 부분
1) XML에서 처럼 <a>로 시작했으면 </a>와 같이 태그(엘리먼트)를 꼭 닫아줘야 한다.
2) 두 개 이상의 태그(엘리먼트)는 무조건 하나의 태그(엘리먼트)로 감싸져있어야 한다.
혹시 만약에 <div></div>로 단순히 덮어쓰기 애매한 경우,
(* style 및 table작성 시 꼬일 수 있다고 한다)
<Fragment></fragment> 나 <></>와 같이 짧은 구문으로 감쌀 수도 있다.
위 링크에 가보면 관련 예시를 상세하게 확인해 볼 수 있다.
2. 자바스크립트 부분
1) 변수 선언
render(){여기 안에 } , return() 위에 변수를 선언한 후 사용하면 된다.
선언 방식은 자바스크립트 var와 scope 단위만 다르고 (var는 함수단위, jsx의 변수는 블록단위)
거의 동일한 기능을 하는 const(상수인 경우), let(변수인 경우)를 사용한다.
2) 조건식
삼항연산자, AND 연산자는 사용할 수 있지만 if문은 사용할 수 없다.
if문 대신 switch문이나 람다식(화살표 함수)을 사용할 수 있다.
3. 스타일
1) html에서 header에 css 선언하듯
className은 const로 선언하고 return(여기 안에 )에서
<div style = {선언한 변수이름} > 형태로 호출할 수 있다.
2) html에서 css파일을 연동시키듯
import './참조스타일.css' 방식으로 참조할 수 있다.
오늘의 예제는 아래 블로그에 있는 내용을 기반으로 따실(따라 실습)을 해보았다.
누구든지 하는 리액트 3편: JSX | VELOPERT.LOG
이 튜토리얼은 10편으로 이뤄진 시리즈입니다. 이전 / 다음 편을 확인하시려면 목차를 확인하세요. 리액트 컴포넌트에 대하여 조금 더 자세히 알아봅시다! 컴포넌트 파일 파헤치기 이전에 만든 hello-react 프로젝트를 열어보세요. 다음과 같이 프로젝트가 구성되어 있을 것입니다. 리액트를 사용하면 여러분의 웹 애플리케이션에서 사용하는 유저 인터페이스를 재사용 가능한 컴포넌트로 분리하여 작성함으로서, 프로젝트의 유지보수성을 우수하게 해줍니다. 여기서 컴포넌
velopert.com
코인깎는노인
