[React] 공부시작

안녕하세요 !

저는 이번주부터 React 라는 자바스크립트 라이브러리를 공부중에 있습니다.

목적은 이직준비입니다. 현재는 그룹웨어 엔지니어로써 근무중이지만 , 추후 이직시에는 프론트엔드 개발자(기회가 된다면 풀스택 개발자)로 일하고 싶어서 근무 기간동안 충분히 내실을 갖추려 합니다.(소개글에 이직준비는 내년 상반기로 미뤄질 듯 합니다. 대표님께서 부서를 계속 이끄실 계획이셔서요.)

우선 근본적으로 백엔드 , 프론트엔드 중 하나를 먼저 골라야 한다는 생각이 앞섰는데요.

사내에서 프로젝트를 진행해가며 jQuery , Ajax 를 쓰면서 프론트엔드에 대한 매력을 많이 느끼고 디버깅도 백엔드에 비해 직관적이고 빠르다는점에서 프론트엔드쪽으로 맘이 더 기운 것 같습니다.

성격이 좀 급한 성격이라 바로 컨펌되는 시스템이 좋더라구요 ^^..

물론 요새는 어느 한 분야에 국한되어 있는 프로그래머보다 풀스택 프로그래머가 비전이 더 좋기 때문에 , 백엔드도 공부 할 예정입니다.

현재 백엔드는 jsp정도만 사용 가능하여 , 수준이 많이 부족합니다. 자바 클래스 및 패키지 등을 사용하여 프로젝트 한 경험이 2년전 쯤이여서 많이 까먹은 상태에요. 정보처리기사 공부를 하면서 많이 상기 시키긴 했지만 , 실제 코딩을 이력이 오래되었네요 ㅎㅎ..

Vue.js 와 React 중 어떤 라이브러리를 먼저 학습할 지 고민 중에 React가 더 파이가 크다하여 , React를 먼저 공부하기로 마음 먹었습니다 !

유튜브를 통해 간단히 React를 맛 보다가 뭔지 모를 흥미를 느껴서 유료 강의를 결제하였습니다.

에디터는 VSCode를 사용하였고 node.js를 설치했습니다.

---

간단히 이번주 간 학습한 내용을 기록하겠습니다.

1. node.js 설치 : Create React App 라이브러리(npm,npx)를 사용하기 위함 

npm은 라이브러리를 쉽게 설치하게 해주는 툴정도로 학습하였습니다. VSCode 에서 npm start를 입력하면 터미널에서 에러메시지를 띄워줍니다.

node.js는 최신버전보다 왼쪽에 있는 어느정도 안정화 된 버전을 설치하시는 것이 더 좋다고합니다 !

https://nodejs.org/ko

Node.js

프로젝트를 관리할 폴더를 생성하신 후 VSCode로 여시고 , 그 폴더의 터미널에서 npx create-react-app blog                       blog는 프로젝트 명이며 , 다른 이름으로 해도 무방합니다.

코딩은 App.js(메인페이지느낌)에서 하고 , 자바스크립트 function 안에서 html 태그들을 그리는게 신기했어요. React에서는 이 html 태그들을 jsx라고 부릅니다.

2. React 장점 

1) SPA(Single Page Application)                                                                                                                                                   하나의 html파일에서 변경되는 그 부분만을 변경하여 UI가 출력되기 때문에(페이지 전체 리로딩이 아님) 부드러운 UI를 제공합니다. 

2) 데이터 바인딩이 쉽다.                                                                                                                                                       데이터 바인딩 받은 변수를 그대로 중괄호 안에 넣으면 끝 ex) {변수}
 함수도 가능 !! ex) {함수()}                                                                                                                                                        아직 다 알지는 못하지만 React에서는 {} 중괄호를 대부분으로 사용하는 느낌입니다.

3) 큰 프로젝트에서 html 관리가 용이하다.                                                                                                                                   html을 함수, array, object 이런 곳에 보관하고 재사용할 수 있어서 큰 프로젝트일 수록 html 관리 편리해진다고 합니다.  

4) React의 범용성                                                                                                                                                                         React Native를 이용하면 모바일 앱개발도 가능합니다. React와 문법이 동일하고 html , css 문법만 약간 다르다고 하네요.

3. state                                                                                                                                                                                         state란 변수 대신 사용하는 데이터 저장공간입니다. 일반적으로 자주 변경되는 변수들을 state에 저장합니다.                     state는 useState라는 함수를 사용합니다.                                                                                                                               형식(Array 기준) : let [변수,변수를 변경하는 함수] = useState(변수의 초기값);

    장점 -> 웹이 App 처럼 동작하게 만들 수 있음 , state가 변경되면 html이 자동으로 재렌더링 
    재렌더링 -> 새로고침 없이 데이터 변경사항 반영 => 스무스하게 변경

    state 데이터 수정방법                                                                                                                                                                 !!!!!!!!! state 데이터는 직접 수정할 수 없음(재렌더링이 안됨) !!!!!!!!!                                                                                        

let [title,titleUpdate] = useState(['정보처리기사 공부법','남자 코트 추천','군포 피자 맛집']);

     남자 코트 추천 -> 여자 코트 추천으로 변경하기

      ex 1) titleUpdate( ['정보처리기사 공부법','여자 코트 추천','군포 피자 맛집'] );
      전체 Array를 가져와서 변경한다.                                                                                                                                               
      ex 2) 복사본 만들기
      1.state 데이터를 가져와서 변수(newData)에 담음
        ES6 신문법 deep copy -> ...을 붙히면 값 복사
      2.변수(newData)에 변경할 값을 담음
      3.변경할 함수안에 변수(newData)를 담음
      var newData = [...title];
      newData[1] = '여자 코트 추천';
      titleUpdate(newData); 

4. Component

function 컴포넌트명() { return ( div덩어리 ) }

      Component -> 리액트에서 html을 한 단어로 줄여서 쓸 수 있는 방법 , 관리가 편해진다는 장점

 

      1. 컴포넌트로 만드는 기준 -> 반복출현하는 html들 , 자주 바뀌는 UI들(재렌더링이 많이 이뤄지는)

      다른 페이지를 만들 때도 사용

      2. 컴포넌트 이름은 대문자로 시작 , 소문자는 렌더링 x

      3. 단점 -> state를 쓸 때 복잡해짐 -> 상위 컴포넌트에서 만든 state 쓰려면 props 문법 사용해야함

      

<Modal></Modal> -> 이 부분에 아래의 html이 입력

function Modal(){//Component 이름

      return(//return안에 원하는 html 담기 , 하나의 태그로 묶어야함 div 여러개로 못나눔

      <div className='modal'>

        <h2>제목</h2>

        <p>날짜</p>

        <p>내용</p>

      </div>

      )

    }

                                     

다음 공부내용도 포스팅 해보겠습니다. React를 시작하려 하시는 분들께 도움 되었으면 좋겠고 , 저도 열심히 해보겠습니다!