(책) 리액트를 다루는 기술

- 알고있던 내용

1. => 제목과 관련된 기존에 알고 있던 내용을 서술했습니다.

- 궁금한 내용

1. => 해당 주제에서 다루는 내용 중, 바로 이해하지 못한 부분, 혹은 궁금한 내용을 서술했습니다.

- 이해한 내용

1.궁금한 내용의 번호에 맞게 이해한 내용을 서술했습니다.

- 새로 알게된 내용

1. 이해한 내용과는 다르게, 새로 알게 되었지만 이해하는 노력 없이 자연스럽게 받아들인 내용을 서술했습니다.

- 보충할 내용

1. 이해한 내용, 새로 알게된 내용과 다르게 암기해야 할 간단한 내용등을 부수적으로 서술했습니다.

 

2023/01/13

15. Context API

15.1. ~ 15.2. Context API

- 알고있던 내용

1. Context API: 컴포넌트의 트리가 깊어질수록 props로 같은 내용을 전달하는 것은 비효율적이기 때문에, 전역 변수를 두어 직접 해당 컴포넌트에 전달한다.

- 궁금한 내용

1. 코드 사용 방법

2. 객체를 전달하는 컴포넌트인가?

- 이해한 내용

1. Context 안의 Consumer 컴포넌트를 통해 조회.

 - Context 컴포넌트에는

   const ColorContext = createContext({color:'black'})

 - div태그 영역의 배경색상을 변경하고 싶은 경우, 

 - <ColorContext .Consumer>{ children => <div style = {{ background : children.value }}> </div> }</ColorContext .Consumer>

 - 이게 가능한 이유는, children에 {color :'black'}객체가 대입되고, 해당 객체를 불러오는 부분에서 객체 속성을 적용해주는 방식이기 때문이다.

 - Consumer는 사용하려는 컴포넌트 안에 배치해야 한다.

2. Provider를 사용해 Context의 value를 변경

 - Consumer는 사용하려는 컴포넌트 밖에 배치해야 한다.

- 새로 알게된 내용

1.

- 보충할 내용

1.

15.3. 동적 Context 사용하기

- 알고있던 내용

1. 

- 궁금한 내용

1. 동적 Context 사용하기는 조금 어려운것 같다. 여러번 읽어야 할 것 같다.

 - 왜 이렇게 복잡해보이는 걸까?

2. createContext()에서 setColor가 어떻게 들어가게 된거지? 아직 선언해주지 않았는데..

3. states, actions는 각각 언제 사용하는걸까.. states는 값을 불러오는 부분이고, actions는 set함수와 관련있기 때문에 값을 넣어주는 부분인데.

4. Consumer는 왜 필요한거지? Provider만 있어도 될 것 같은데..

5. 그래서 어떻게 '전역적'이라는 걸까? <SelectColors> 와 <ColorBox>가 부모-자식 관계가 아니라, 병렬적으로 배치되어 있는데.. <Consumer>도 써준곳 바로 거기서만 되는건데.. 그럼 Consumer도 넘겨줘야 하는건가..

- 이해한 내용

1. ColorContext에서 Consumer, Provider를 새로 정의해주었다. 그래서 복잡해보였다.

2. createContext()는 Context를 사용하겠다는 의미와, 초깃값 객체를 선언한다는 의미인것 같다.

 (1) const ColorContext = createContext(

     { state : {color: 'black', subcolor:red'},

       actions : { setColor: ()=>{}, setSubcolor: () => {} } } )

 - 이 부분이 헷갈렸는데, setColor는 useState의 set함수가 아니라.. 클래스 내부의 key 이름이었다. . . 초기화를 () => {} 로 해서 콜백 함수를 사용하겠다는 의미였다.

 (2) const ColorProvider = ({ children }) => {

          return <ColorContext.Provider value={value}>{children}</ColorContext.Provider>}

 - 결국 <ColorProvider> 컴포넌트 안에 <ColorContext.Provider>를 넣는다는 의미. value를 주입하기 위해 위와 같은 구조로 만드셨던 것 같다.

 - ColorConsumer에서 value를 사용할수도 있지만, (value는 ColorProvier에서 만든 객체) {states} 이처럼 구조분해할당을 사용할 수도 있다. 그리고 {actions}으로도 가능하다.

3. (1) states는 값을 불러오는 곳에서 하는것

    (2) actions는 값을 set해야하는 부분에 하는 것.

4. (1) Provider: 변수, set 함수를 객체로 보관해 놓는 장소. 선언할때만 복잡해보임. 

         <ColorContext.Provider value={}>{children } </ColorContext.Provider>

        형태는 기억해둘 것. 단순한 컴포넌트인데 useState()를 사용한다는 점.

    (2) Consumer: Provider에서 만든 객체를 사용하는 장소. 함수 실행 형태로 사용됨. 이후 () => {} 형태로 사용됨

5. (1) 일단, 중간에 쓰지 않고 전달하는 컴포넌트까지 props를 전달하지 않아도 된다는 장점이 있다.

    (2) 아! Provider로 감싸진 곳에서는 어느 곳에서든 사용이 가능한데, Consumer가 들어간 컴포넌트에서는 어디든 state 또는 action을 활용할 수 있는건가? 

https://velopert.com/3606

 

- 새로 알게된 내용

1. 결국엔 모두 객체

- 보충할 내용

1. Render Props 패턴: children에 함수를 전달하는 방식

2. useContext를 이용할 수도 있다.

3. 컴포넌트

3.3. props

- 알고있던 내용

3.3.5 비구조화 할당(구조 분해) 문법을 통해 props 내부 값 추출하기

 - props 값을 조회할 때 마다, props.name, props.children 처럼 props. 키워드를 사용하는 대신, props의 내부 값을 추출하는 방법.

 (예) const { name, children } = props

- 궁금한 내용

3.3.3. props 기본값 설정: defaultProps

 (1) 컴포넌트명.defaultProps = { name: '기본 이름', }

3.3.4 태그 사이의 내용을 보여주는 children

 (예) <MyComponent>hello<MyComponent>

       const MyComponent = props => { return <div>{props.children}<div>}

3.3.6 propTypes를 통한 props 검증: 

- 알고있던 내용

 (1) props 타입을 지정하는건 TypeScript 의 interface사용과 비슷한 것 같다. 

- 배운 내용

 (1) props 타입을 지정하는 방법?

 (예) import PropsTypes from 'prop-types';

       MyComponent.defaultProps = { name : '기본 이름' };

       MyComponent.propTypes = { name: PropTypes.string };

3.3.7 클래스형 컴포넌트에서 props 사용하기

 (예) 비구조화 할당 => const { name, children } = this.props;

 (예) MyComponent.defaultProps = { name : '기본 이름' };

 

3.3.6.1 isRequired를 사용하여 필수 propTypes 설정

- 알고있던 내용

 (1) 꼭 필수로 받아와야 하는 props ? (타입스크립트에서 ? 아닌 타입처럼..)

- 배운 내용

 (1) props 타입을 지정하는 방법?

 (예) MyComponent.propTypes = { name: PropTypes.string,

                                                       favoriteNumber: PropTypes.number.isRequired };

 

3.3.7 클래스형 컴포넌트에서 props 사용하기

 (예) 비구조화 할당 => const { name, children } = this.props;

 (예) MyComponent.defaultProps = { name : '기본 이름' };

 

3.4 state

- 알고있던 내용

 (1) state: 컴포넌트 내부에서 바뀔 수 있는 값.

- 배운 내용

 (1) state의 종류: 1.클래스형 컴포넌트가 가지고있는 state 2. 함수 컴포넌트에서 useState라는 함수를 통해 사용하는 state

 

3.4.1 클래스형 컴포넌트의 state

 (1) 컴포넌트에 state 설정?

  - constructor(props){

    super(props); // Component 클래스의 생성자 함수 호출

    this.state = { number: 0 }; } // 객체 형식!

 

3.4.2 함수 컴포넌트에서 useState 사용하기

- 알고있던 내용

(1) 배열 비구조화 할당 Hooks 사용

(2) 배열 비구조화 할당: 객체의 비구조화 할당과 비슷하다. 배열 안에 들어있는 값을 추출하는 문법.

 (예) const [one, two] = array     //const array = [1,2];로 미리 할당되어 있음.

(3) useState 사용하기

 - 배열의 첫번째 원소는 "현재 상태", 두번째 원소는 "상태를 바꿔주는 함수"

(4) 한 컴포넌트에서 useState 여러번 사용하기=> 가능

 

3.4 state 를 사용할 때 주의 사항

- 알고있던 내용

(1) 반드시 set 함수를 이용해서 state를 변경해야 한다.

 

5. ref: DOM에 이름 달기

 (1) ref를 사용하는 이유? : id를 사용하는 것처럼 ref를 사용한다. 컴포넌트에서 id대신 ref를 써야하는 이유는 컴포넌트는 재사용해야 할 때가 있는데, id를 사용하게 되면 재사용된 컴포넌트들의 id가 중복되는 결과가 발생한다. 컴포넌트에서 ref는 전역적으로 사용되지 않고 컴포넌트 내부에서만 사용되기 때문에 중복 문제가 발생하지 않는다.

 

 (2) ref는 어떤 상황에서 사용해야 할까? : DOM을 직접 건드려야 할 때. => 

 

2023-02-22(수)

13. 리액트 라우터로 SPA 개발하기

13.4 SPA란

 (1) 리액트 라우터를 사용해 여러 페이지로 구성된 프로젝트를 만들었는데 왜 싱글 페이지 일까? : 멀티 페이지와 구분하기.

 - html을 여러개 만들어서 사용했던 멀티 페이지는 다른 페이지로 이동할때마다 새로운 html과 리소스를 전달 받는 것이었는데 이와는 다르게, 싱글 페이지는 한번만 html을 받아오고 나머지는 json 등의 데이터만 전송해서 업데이트하기 때문.

=> 사용자 인터랙션이 많아진다면 서버 자원을 아낄 수 있다.

 - 리액트 라우터는 브라우저의 주소창 경로에 따라 페이지를 보여줌. 다른 페이지로 이동할 때 html을 새로 요청하지 않고 API를 사용해 주소창 값만 변경하고 기존 페이지의 웹 어플리케이션은 유지하고 다른 페이지를 보여주는 것.