[React] 처음 시작하는 React

안녕하세요? 주니하랑 입니다.

오늘은 주니하랑이 React에 본격적으로 처음 공부하는 시간인 것이에요.

주니하랑은 Full-Stack이 되고 싶은 것이에요!

 

 

---

📌 Reate 개념 (책 추천: 모던 자바스크립트 Deep Dive)

---

  📍Reate 탄생 이유

 

그것은 바로 아래와 같은 이유 때문인 것이에요.

1. Component - Props, State
2. HOOK
3. Axios
4. Router - Tamplate 이용
5. Redux - thunk / saga ---> Redux Toolkit

 

 

  📍Reate의 시작

JSTL은 2015년 부터 Update가 되지 않아 사용을 권장하지 않습니다!

• SSR (Server Side Render) : 서버에서 필요한 것을 다 만들어 보내는 방법
  SSR -> JSP -> JAVA -> Compile -> Output State
• SEO (Search Engine Optimizer) 
• Web Page 중심과 Web Application
• HTML의 입장 변환
• JS의 입장 변화
• 단일 Todo List

Browser는 HTML을 만나면 HTML을 Memory에 Tree 구조로 넣는 것이에요. 이것을 DOM Tree(HTML과 1:1로 매칭)라고 하고, JS에서는 DOM 핸들링이라 하는 것이에요. CSS는 보여주는 것만 Tree 구조로 만드는 것이에요. (랜더링 트리)

 

  📍Component란?

사용자가 정의한 Tag를 말하는 것이에요. Component를 사용하면 좋은 점은 무엇일까요?

• 가독성을 높일 수 있다.
• 재 사용성이 좋아진다.
• 유지보수성이 좋아진다.
• html Code를 한 페이지에 작성하고, 그 내용을 사용할 곳에서 Tag만 적어주면 사용 가능

 

 

  📍최초 설정

react를 설치할 때, npx와 npm을 이용할 수 있습니다!

• npx : 임시 설치 뒤 바로 삭제
• npm : 영구 설치

 

 

  📍Reate의 이모저모

 

최초 리엑트 프로젝트를 만들면 index.js(최초 접근점)에 document.getElementById('root')로 되어 있는데, 이것은 index.html에 31번째 줄에 <div> Tag안에 id이름이고, Mapping이 되는 것이에요.

다시 index.js에 import 부분에 App from ./App이 있는데, 이것은 App.js를 import하여 <div className="APP">이 끝날 때 까지 그 안에 모든 내용을 import 하겠다는 것이에요. index.js 7 ~ 9번째 줄에 <App />을 통해 App.js의 내용을 결국 가져오는 것이지요.

 

또한, css File을 수정할 때는 index.js에 import된 index.css를 수정하면 되는 것이에요.

 

JS가 문자열을 Browser에 보내주면 최초 Browser는 한번 읽는데, '~~문'(제어문 등 혹은 선언문 (변수 등))을 먼저 찾고, 두번째 읽을 때는 '~~식'을 찾는 것이에요.

 

만약 코딩을 하고, 브라우저에서 경고로 Undifind라고 나오면 변수는 있는데, 값이 없을 때 나오는 것이에요. JS는 함수도 변수처럼 처리한답니다!

 

Not Difind는 변수 조차 찾을 수 없을 때 뜨는 Error에요.

 

JS 호이스팅이란? 함수에서 사용될 매개 변수가 함수 보다 아래에서 값이 담기는 현상을 말하는 것이에요.

JS 클로져란? 함수와 함수가 선언된 어휘적(Lexical) 환경의 조합인 것이에요.

이 말이 무엇이냐면?

function outerFunc() {
	var x = 10;
    var innerFunc = function() {
    	console.log(x);
    }
    
    innerFunc();
 }
 
 outerFunc(); // 10

 

위의 코드에서 outerFunc 내에서 내부 함수 innerFunc가 선언되고 호출이 된 것이에요. 이 때 내부 함수 innerFunc는 자신을 포함하고 있는 외부 함수 outerFunc의 변수 x에 접근 할 수 있게 된답니다. 이는 함수 innerFunc가 함수 outerFunc의 내부에서 선언되었기 때문인 것이에요.

 

💡참고 :
 스코프는 함수를 호출할 때가 아니라 함수를 어디에 선언하였는지에 따라 결정된다. 이를 Lexical scoping (렉시컬 스코핑)이라 한다. 위 예제의 함수 innerFunc는 함수 outerFunc의 내부에서 선언되었기 때문에 함수 innerFunc의 상위 스코프는 함수 outerFunc이다. 함수 innerFunc가 전역에 선언되었다면 함수 innerFunc의 상위 스코프는 전역 스코프가 된다.

 

클로저는 자신이 생성될 때 환경(Lexical enviroment)을 기억해야 하므로 Memory 차원에서 손해를 볼 수 있는 것이에요. 하지만 클로저는 자바 스크립트의 강력한 기능으로 이를 적극적으로 사용해야 한답니다!

 

그것은 바로! 상태 유지!

클로저가 가장 유용하게 사용되는 상황은 현재 상태를 기억하고, 변경된 최신 상태를 유지하는 것이에요.

 

  📍함수 이야기

console.log(doA)
console.log(doA())

function doA() { // 함수의 선언문
	return 10
}

 

참고로 함수는 변수로 봐야 해요. 위의 예제에서 doA는 함수가 아닌 변수로 보고, { }는 변수의 객체라고 생각을 합시다!

위와 같은 코드를 보면 1번(console.log(doA))는 브라우져 상에서 함수 내용이 그대로 출력되게 되고, 2번(console.log(doA())는 10이 출력되는 것이에요.

 

 

  📍객체 리터럴 이야기

• console.log(boj.name)
• console.log(obj[name])
  위와 아래는 둘 다 가능하지만, 기능에 차이가 크다
• var obj = { name : 'AAA', age : 16 }  // 객체 리터럴 형식
• JSON = 문자열이다.
• JSON.parse() = JSON 형식을 JS 객체로 반환할 때 사용

 

 

위의 필기 자료에서 부족한 내용을 아래에 작성할게요!

Props (Properties) : JavaScript의 객체로 랜더링 결과물에 영향을 주는 정보를 갖고 있고, 함수 매개 변수처럼 컴포넌트에 전달이 된다.
부모 컴포넌트가 자식 컴포넌트에게 값을 주는 것으로 자식 컴포넌트에서는 props를 받아오기만 하고, 받아온 props를 직접 수정할 수는 없다. 이런 이유로 위 필기 자료에 읽기 전용이라고 작성한 것

State : JavaScript의 객체로 랜더링 결과물에 영향을 주는 정보를 갖고 있고, 함수 내에 선언된 변수처럼 컴포넌트 안에서 관리된다. 또한, 내부에서 값을 변경할 수 있다.

 

 

  📍React Router 이야기

 

반응형

 

  📍Higher Order Component 이야기

 

Higher Order Component - HOC (고차 컴포넌트) 란? 컴포넌트 로직을 재사용하기 위한 React에 고급 기술인 것이에요.

HOC은 React API의 일부가 아니고, React의 구성적 특성에서 나오는 패턴이랍니다.

 

아래는 HOC를 가져와 새 컴포넌트를 반환하는 함수 인 것이에요.

const EnhancedComponent = higherOrderComponent(WrappedComponent);

 

컴포넌트는 props를 UI로 변환하는 반면 HOC는 컴포넌트를 새로운 컴포넌트를 변환 하는 것이에요.

HOC은 Redux의 connect와 Relay의 createFragmentContainer와 같은 3rd Party React Library에서 흔하게 볼 수 있답니다.

 

 

  📍Redux 이야기

 

 

 

  📍배포 시 참고

최초 개발 단계에서 Browser를 통해 확인하고자 할 때 #npm run start 명령어로 실행하는데, 이렇게 실행하면 Browser의 Resource를 엄청 잡아 먹게 되는 것이에요. 그래서 배포 할 때는 #npm run build 명령어를 사용해야 되는 것이에요.

 

 

  📍부록

시멘틱 Tag는 React와 전혀 관계 없는 HTML 5의 Tag로 그 어떤 기능을 갖고 있는 것이 아니고, 사람들끼리 이것이 무엇인지에 대한 구별을 위해 사용하는 것이에요. 

<header></header>는 여기가 헤더부임을 알리는 것이고, <nav></nav>는 여기가 네비게이션 부임을 알리는 것이에요.

 

 

 

---

 

주니하랑의 글이 마음에 드셨나요? 구독과 공감! 그리고, 댓글 그리고 방명록은 주니하랑에게 많은 힘이 됩니다