[WIL] 5주차 → 좋은 개발자란?, 전역 상태 관리, CSS

같이 일하기 좋은 개발자란?? 

 

신입으로써 무조건 잘해야지 보다는 안좋은 습관을 하지 않는 게 좋은 개발자라고 생각 했기 때문에 관련된 내용을 정리 해봤습니다.

 

1) 질문을 너무 많이 한다. (노력 없이 구글에 검색 하듯이 질문을 한다.)

2) 침묵한다. (물어보기 미안해서, 물어보기 싫어서 안물어 보고 일정은 다 썼는 데 최악의 결과물을 낸다면 최악이다.)

-> 빠른 판단을 내린다. (반나절이나 하루동안 열심히 찾아보고 노력 했는 데도 답을 찾지 못했다면 능력 밖이기 때문에 상사나 멘토에게 질문을 내리는 것이 좋다. 핵심은 최대한의 노력을 하라는 것이다.)

3) 이해하기 전에 대답한다.

-> 겸손한 마음을 가지는 것이 좋다.

4) 이해하는 척 한다.

5) 해보지도 않고(프로타이핑 : 임시로 검증하기 위한 코드를 짜는 것) 결론 내기 (신뢰도 문제를 발생 시킬 수 있다.)

6) 담당 모듈에 대한 공부를 하지 않는다.

-> 실제로 업무에 투입 되기 전에 이미 만들어진 설계 문서, 개발 문서, 코드, 헤더 파일 등을 읽어보고 큰 그림을 그려야 올바른 수정을 할 수 있다.

7) 구현 실수

-> 코딩을 하기 전에, 코드를 어떻게 테스트 할 지 테스트 방법에 대한 고민을 하면 좋다.

8) 자꾸 하나씩 빼먹는다.

9) 일정 지연 (이 일이 얼마나 걸릴꺼야 라는 것을 일정 산출이라고 한다.)

-> 일정이 하나 있으면 무조건 x2.5를 한다.

 

결론적으로 중요하다고 생각되는 부분은 (1) 공유 (2) 리뷰 (3) 의논으로 정리 할 수 있을 것 같다!

 

https://www.youtube.com/watch?v=NHuxGa8dL1s 

---

리액트와 전역 상태 관리

 

리액트와 전역 상태 관리에는 크게 두가지 방법이 있는 것 같다. 첫번째는 Context API이고, 두번째는 Redux이다.

 

1) Context API

• Context를 이용하면 단계마다 일일이 props를 넘겨주지 않아도 컴포넌트 트리 전체에 데이터를 제공 할 수 있다.
  (기계적인 props 전달 코드를 없앨 수 있는 방법 중 하나이다. 전역 데이터를 공유하는 방법이며, 로그인 유저나 테마 등의 데이터 관리를 한다.)
• 전역 상태 관리 방법 중 하나로써, Redux, React-Router, Styled-Components를 기반으로 구현 되어 있습니다.
• React 패키지에서 제공하는 기능입니다.

 

- context를 만든다. (컴포넌트 밖에 넣는다.)

let 재고context = React.createContext()

+ createContext() : 같은 변수 값을 공유 할 범위를 생성한다.

+ 같은 값을 공유할 HTML을 범위로 싼다. 

-> props 없이 공유하고 싶은 변수의 데이터 사용이 가능 해진다.

<재고context.Provider value={공유하고 싶은 데이터}>

{값을 공유하고 싶은 컴포넌트}

</재고context.Provider>

 

- useContext()로 공유된 값 사용하기 (훅이기 때문에 useContext를 import 해와야 한다.)

let 재고 = useContext(재고context)

+ 리액트 요소에서는 {} : 바인딩을 사용하면 된다.

 

간단한 데이터 전송은 간단한 props를 사용하는 것이 좋습니다.

그럼 Context API는 어떤 경우에 사용 하는가!! 최상위 컴포넌트에서 100번째 자식에게 값을 넘겨 줘야 할 때는

쓸데없이 props를 많이 사용하기 때문에 props drilling이 일어난다 이럴 때 유용하게 사용 가능하다.

 

결론 - context 만들기

1) React.createContext()로 범위를 생성한다.

2) 같은 값을 공유할 HTML을 <범위>로 싸매기

3) useContext()를 사용해서 공유된 값 사용하기

 

2) Redux

: Redux를 구독하고 있는 컴포넌트 파일들이 같은 값을 공유 할 수 있도록 저장공간을 생성하는 라이브러리

+ state 데이터 관리 가능

 

- 패키지 설치 하는 방법

yarn add redux react-redux

-> redux : 말 그대로 redux를 설치하는 것

-> react-redux : react에서 redux를 편리하게 사용 할 수 있도록 도와주는 패키지

redux는 react만 사용하는 것이 아니라 프론트엔드 프레임워크 / 라이브러리에서 사용 할 수 있습니다.

 

- [상태관리 흐름도]

딱 4가지만 알면 됩니다.

store, action, reducer 그리고 component! 아주 큰 흐름만 잘 파악해도 굳굳!!

(1) 리덕스 Store를 Component에 연결한다.

(2) Component에서 상태 변화가 필요할 때 Action을 부른다.

(3) Reducer를 통해서 새로운 상태 값을 만들고,

(4) 새 상태값을 Store에 저장한다.

(5) Component는 새로운 상태값을 받아온다. (props를 통해 받아오니까, 다시 랜더링 되겠죠?)

 

이전에 정리해둔 게시물 참고하면 좋을 것 같다.

2021.11.18 - [항해 중/3주차 리액트 기초반] - 3주차 - 리덕스, 리덕스를 통한 리액트 상태관리

---

 

3. CSS 라이브러리와 리액트

 

React는 다양한 라이브러리의 조합으로 생산성이 높아지는 자바스크립트 라이브러리입니다.

따라서 스타일을 적용하는 방법에도 기존의 import를 사용하는 것 이외에 라이브러리를 사용하는 다양한 방법이 있다.

 

1) Import

: 가장 기본이 되는 방법으로는 Component에서 CSS 파일을 바로 import 하는 방법이 있다.

// App.js
import "styles.css";

const App = () => {
  return(
    <div className="App">
    	...
    </div>
   );
}

가장 간단한 방법이기 때문에 적용하기는 쉽지만, 그만한 단점이 존재한다.

어플리케이션의 규모가 작은 경우에는 큰 영향이 없지만, 규모가 커질수록 컴포넌트가 많아진다.

그렇게 되면 css 파일을 관리하기도 어려워지며, 여러 컴포넌트에서 사용한 Class Name에도 중복이 발생할 수 있다.

그로 인해,  컴포넌트에서 사용한 클래스 이름을 B 컴포넌트에서도 사용하는 등 원하지 않던 결과가 나올 수 있다는 것이다.

 

2) Encapsulation

: 컴포넌트와 해당 컴포넌트에서 사용하는 CSS 파일을 묶어서 export

// Component/Header/Header.js
import "./Header.css";

const Header = () =>{
  ...
}
export default Header;

// Component/Header/index.js
import Header from "./Header.js";

export default Header;

// App.js
import Header from "./Component/Header";

const App = () => {
  return(
    <div className="App">
    	<Header />
    </div>
  )
}

export default App;

단순한 import 방식과의 차이점은,

해당 컴포넌트에서 사용할 css 파일을 같은 디렉토리 내에서 관리하여 캡슐화를 한다는 점이다.

또한, App.js 파일에서 Header 컴포넌트를 import 하기 위해서는 아래와 같이 코드를 작성해야 한다.

import Header from "./Component/Header/Header"

하지만 이렇게 코드를 작성할 시 코드의 가독성이 낮아진다는 단점이 존재한다.

따라서 import 경로에 JS 파일이 아닌 디렉토리를 입력하면 index.js를 우선적으로 찾는 특성을 이용하였다.

 

3) CSS Module

: React에서 제공하는 CSS Module을 이용하는 방법이 있다.

 

캡슐화를 사용하더라도 Class Name의 중복 현상을 해결하지 못했다.

CRA(create-react-app)을 이용해서 만든 React 프로젝트에서는 CSS Module 기능을 제공한다.

css 파일의 확장자를 .module.css로 작성하면 손쉽게 사용이 가능하다.

// App.js
import styles from "./App.module.css";

const App = () => {
  return (
    <>
      <div className="App">
        <h1 className={styles.Title}>CSS 적용</h1>
      </div>
    </>
  );
};

export default App;

/* App.module.css */

.Title{
	color:red;

앞서 CSS Module 방식을 이용하면 Class Name의 중복을 막을 수 있다고 했는데, Inspect를 하면 Title의 Class Name이 특이한 것을 볼 수 있다.

CSS Module이 클래스 이름이 중복이 되지 않도록 고유한 이름을 지어준 것이다.

 

4) Styled-Components

: CSS Module을 사용해서 클래스 이름의 중복을 막았다!

그럼에도 아직 해결되지 않은 것은 CSS 파일이 JS 파일과 분리되어 있다는 점이다.

Vue에서는 Vue 파일 내에서 <style scoped>와 같이 사용하여 스타일을 해당 컴포넌트 내에서만 제한할 수 있다.

React도 Styled-Components 라이브러리를 통해서 컴포넌트 파일 내에서 스타일을 지정할 수 있다.

yarn add styled-components

// Header.js

import styled from "styled-components";

const StyledHeader = styled.header`
  color: white;
  background-color: black;
  font-size: 20px;
  width: 300px;
  text-align: center;
`;

const Header = () => {
  return <StyledHeader>This is Header.</StyledHeader>;
};

export default Header;

// App.js
import Header from "./Header";

const App = () => {
  return (
    <>
      <div className="App">
        <Header />
      </div>
    </>
  );
};

export default App;

styled.TagName의 형태로 새로운 객체를 만들고, 내부에 원하는 스타일을 작성하면 된다.

컴포넌트에서는 해당 객체를 태그 이름으로 사용하면 쉽게 사용이 가능하다.

이 경우에도 Class Name이 특이하게 지정된 것을 볼 수 있다.

이 방법을 사용하면 컴포넌트와 Style을 한 파일 내에서 관리할 수 있고, Class Name의 중복도 발생하지 않는다.

또한, JS 파일 내에 위치하기 때문에 props도 전달이 가능한데, 이 덕분에 조건부 서식 지정도 쉽게 가능해진다.

 

https://velog.io/@sorious77/React-CSS-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0

React에 CSS를 적용하는 여러 방법