난생처음 React를 접하다.

안녕하세요. 안드로이드 개발 2년차가 되어가는 엄선오라고합니다.

이번에 처음으로 리엑트 공부를 시작하게되었습니다.

매번 Java,Kotlin 언어로만 프로그래밍하다가 새로운 언어와 플랫폼으로 개발하다보니 정말 기본적인 부분부터 막막했습니다.

그래서 이렇게 포스팅을 하게 되었습니다. ( 정말 처음 시작하는 입문자 분들을 위한 포스팅입니다. )

우선 NodeJs를 최신버전으로 세팅했습니다.

그리고 사용하시는 IDE 저의 경우에는 Visual Sturio Code를 열고, 새로운 WorkPlace를 설정해주었습니다.

그리고 터미널을 열고 다음 명령어를 입력합니다.

$ npm install -g create-react-app
$ create-react-app my-app

그럼 위 이미지처럼 파일들이 생성됩니다.

ls 명령어를 통해 현위치에 속한 파일을 보면 my-app이 생긴것을 볼 수 있는데요, my-app으로 이동하고나서 npm start 명령어를 통해서

react를 실행할 수 있습니다.

벌써 두근두근 거리네요 ㅎㅎ

자 이제 프로그래밍의 시작 "Hello World"를 출력해볼 차례네요.

src 하위 파일중에 index.js에 들어가셔서 다음 작업을 해줍니다.

기존 코드 제거 ( ReactDOM.render(<App />, document.getElementById('root')); )

아래 코드 추가

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('root')
  );

render() 함수는 JSX 마크업을 렌더링하고, 결과 콘텐트를 DOM 노드에 배치한다.

리엑트 객체는 여기서 사용되지 않고 트랜스파일된 JSX 소스에서 사용된다.

위 코드는 JSX 마크업을 렌더링하며, 자바스크립트와 혼합된 XML 문법을 사용한다.

그리고 브라우저에 도달하기 전에 트랜스파일러에 의해 배치된다.

위 작업을 마친 뒤에 저장을 누르는 순간!!!

실시간으로 반영되는 것을 볼 수 있습니다. ( 우와... )

이제부터 React 공부 재미있게 할 수 있을 것 같습니다.

참고자료 : 리액트&리액트 네이티브 통합교과서

엄코딩의 개발 일지