React {01 개념찾기}

 

컴포넌트 기반 JS 라이브러리 React 개념 알아보기 (feat. 까막눈)

 

React

 

심플하게 React = Javascript UI 라이브러리

진화된 사용자 인터페이스(UI)를 만들 수 있도록 도와주는 도구라네요.

- 페이지 새로고침 없이 페이지 내 필요 부분만 데이터 변경 (비동기)
- 작성한 컴포넌트의 재사용
- 클래스형, 함수형 컴포넌트 작성
- 다양한 컴포넌트 리소스 지원

퍼블리셔 또는 입문자의 입장에서 React 학습을 위해 필자와 여러분은?
Javascript(JS) 또는 기타 개발언어의 변수, 연산자, 조건문, 반복문, 함수 정도의 선행 학습이 필요하고
온라인 학습 도구인 codecademy Javascript등으로 기본 학습, 또는 W3school (Javascript) 등의 튜토리얼을
반복적으로 숙지해 보면 좋을 듯 싶네요.

 

 

First! think about the components.

React 개념의 핵심은 "당신은 컴포넌트 설계자?"

우리는 section, div 등과 같은 블럭들을 기능으로 정의하고 구분하는 시각이 필요해 보입니다.

예를 들어 페이지 대표 헤딩 태그인 h1은 각 페이지마다 다른 제목을 갖기 마련이죠.

즉, 제목은 화면에 따라 변하는 데이터이고 페이지 조건에 따라 선택적으로 적용하고자 한다면

저 제목을 하나의 컴포넌트로 작성할 수 있겠네요. (아래 예는 컴포넌트 이름을 Heading으로 정의했습니다)

// Heading 컴포넌트 작성예

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

* 필요에 따라 정적인 블럭 또한 컴포넌트화 할수 있습니다.

 

이렇게 정의한 작은 컴포넌트들을 조합해 전체 UI를 구성하는 것이 React의 기본 개념이라고 합니다.

컴포넌트 구분예

 

 

JSX (마크업과 JS의 동거)

React는 HTML과 JS가 섞여있는 JSX란 코딩규칙을 제공합니다.

마크업을 변수에 담을 수 있고 동적인 값을 전달할 수 있으며 기존의 마크업에 필요한 요소와 속성들을

JS CamelCase 네이밍 규칙으로 적용할 수 있습니다.

쉽게 HTML,CSS 마크업을 React JS 영역에서 동적인 기능을 포함해 표현하는 형식

const title = <h1>제목입니다</h1>;

return (
   <div>
     {title}
   </div>
);

 

 

JSX에서 CSS 적용

React에서 태그 내 CSS class명을 적용하려면

class="클래스명" 이 아닌 className="클래스명"과 같이 적용해야 한다는군요.

class Heading extends Component {
  render() {
    return (
      <h1 className="page-title">{this.props.title}</h1>
    );
  }
}

 

CSS 속성은 font-size등과 같이 '-'로 구분하는 경우, camelCase란 네이밍 규칙에 따라 작성해야 하고

font-size: 16px 가 아닌 fontSize: 16px

태그 내 inline 스타일 적용시 객체(Object) 형태인 {{ fontSize: 16px }} 로 적용하는군요.

아래 예제는 예제일 뿐, 실무에선 inline 스타일 보단 별도의 CSS 파일로 작성하고 class를 활용하겠지요.

class Heading extends Component {
  render() {
    return (
      <h1 className="page-title" style={{fontSize: 16px}}>{this.props.title}</h1>
    );
  }
}

 

 

JSX에서 태그 닫기

XHTML 규칙과 동일하게 JSX내 모든 태그는 닫기 태그가 필수랍니다.

Single 태그인 경우 아래와 같이 '/'로 꼭 닫기 작성을 해주세요.

class Heading extends Component {
  render() {
    return (
      <div>
      	<input />
      </div>
    );
  }
}

 

 

사족.

필자 또한 React 입문자로 이 글을 계속 써나갈 수 있을 지 미지수지만..

가독성이 좋고 공감과 이해도가 높은 개발자의 멋진 글을 만나던 때를 떠올리며..

이도저도 아닌 포지션에서 불철주야 모니터와 눈씨름 하는 Anybody들에게 작은 도움이 될수 있기를 희망하며

저 또한 동기부여를 해보려고 합니다.