- flex를 사용할 때는 flex-wrap을 반드시 써야하나요? :
-> 답은 No이다. default 값은 no-wrap 상태로 되어있고. flex-wrap을 wrap으로 주게 되면, view 관점에서 넘어가는 자식들 부분은 자동으로 다음칸으로 넘겨주는 역할을 한다.
board 프로젝트 부분
- 게시글 전체(post_list)에서 특정 한개의 게시글을 눌러서 세부 게시글(post) 페이지로 이동하는 부분에서, 이 특정 게시글을 임의로 3이라고 가정해보자. 3을 눌러서 detail 페이지로 넘어가졌을 때 리덕스에 있는 post_list 데이터를 통해서 게시글 전체가 불러올 수는 있지만 현재 게시글에 대한 정보, 즉 특정 게시글 3에 대한 정보를 전체 정보가 담겨있는 post_list에서 어떻게 불러올 수 있을까? :
-> url을 통해 id 값을 넘겨주고, id 값을 받아와서 사용해야한다. 그래야 몇번째 게시글 정보인지 전체 게시글 리스트에서 id값을 통해 접근해서 해당 게시글 정보를 불러올 수 있기 때문이다.
- 게시글 작성 페이지(write.js)에서 ref를 사용해서 값을 어떻게 입력받아야 하는가? -> 또한 "글쓰기"버튼을 통해서 onClick 메소드를 사용해서 모듈에서 구현해놓은 addPost 기능을 어떻게 가져와서 사용할 것인가? :
-> 정보를 리덕스에 만들어놓은 기능을 사용해서 스토어에 담아줄 것이기 때문에, dispatch를 useDispatch 메소드를 통해 선언해주고, ref도 사용할거니까 React.useRef 메소드를 통해 선언해준다. -> 입력받을 태그들에 (input, textarea 등등) ref={title_ref}와 같은 형태로 ref를 잡아준다. -> 해당 컴포넌트 내에서 버튼을 눌렀을때 모듈에서 만들어놓은 addPost 액션크리에이터를 불러와서 사용할 특정 함수를 만들어준다. (공간을 만들어주는 느낌) -> 함수 내에서 ref를 통해 입력받은 값을 담을 객체를 만들어준다. (한 개일 경우도 있지만, 보통 여러 정보들을 담아서 넘겨주기 때문에 list형태로 만든다) -> dispatch를 사용해서 모듈에서 export 해준 actionCreators를 불러오고, actionCreators.addPost를 통해 모듈 액션크리에이터인 addPost에 접근해서 미리 만들어놓은, 전달해줄 값의 형태인 객체 post를 담아준다. -> 버튼이 클릭되었을 때 실행될 함수이기 때문에 원하는 기능을 구현한 이후에 메인이든 이전페이지든 다시 돌아갈 수 있게 props.history를 통해 페이지를 이동해준다.
++ 어떤 태그든 간에 ref값도 props형태로 전달해주는 컴포넌트이기 때문에 html 태그를 직접 사용하는 최소단위 컴포넌트가 아닌 이상, 아래와 같이 ref도 props값으로 해당 태그를 사용하는 최소단위 컴포넌트까지 반드시 전달해주어야한다.
//PostWrite.js
<Input placeholder="제목을 입력하세요" _ref={title_ref} />
// Input.js
const { placeholder, _onChange, _ref } = props;
<ElInput placeholder={placeholder} onChange={_onChange} ref={_ref} />
-
props.history와 리덕스 Configurestore에서 import 해서 가져다 쓰는 그냥 history.push등으로 사용하는 history의 차이점..?과 사용방법의 차이점이 있나요? :
-> history를 Configurestore에서 import 해서 가져다 쓰는 방식은 커스텀 history를 사용하는 방법이다. 이를 사용하는 이유는 커스텀 history를 사용해서 콘솔을 통해 이동하는 로그를 확인하는 로깅 부분 때문. -
history.push를 사용해서 특정 페이지로 이동을 app.js에서 라우팅 시켜주고, 특정 컴포넌트 내에서 .push를 사용해서 라우팅시킨 주소로 이동시키면 이동이 되는데, 상세 게시글과 같은 /detail/:id의 경우에는 app.js에서 라우팅을 시켜놔도 props.history를 사용하면 이해를 에러가 납니다. 이유가 뭘까요? :
-> 이게 에러가 났던 이유는 게시글 하나에 대한 정보를 담고 있는 Post.js가 App.js에서 라우팅을 한적이 없기 때문에, props에 history 객체가 비어있다. -> 이를 해결하기 위해서는 Post.js에서 withRouter를 사용해서, 컴포넌트를 export 해줄 때 withRouter로 감싸주어야 한다. -
브라우저라우터와 커넥티드라우터의 차이점은?
오늘 알게 된 사실(07-19일 기준):
- app.js에서 라우트 되지 않은 컴포넌트에서는 props로 history와 같은 데이터들을 가져올 수 없기 때문에, react-router 에서 제공해주는 withRouter를 import 해서 사용해야한다. 사용방법은, default할때 withRouter로 감싸주어야 history와 같은 객체를 props에서 가져다 사용할 수 있다.
- 특정 모듈에서 원하는 객체(기능)를 import 해올때, 중괄호로 감싸야하는지 아닌지를 구별하기 힘드니까, 가장 좋은 방법은 import 써놓고 마우스를 올려본다. -> 만약에 맞는 형태라면 마우스를 올렸을 때 단어위에 많은 단어들의 조합을 확인할 수 있을 것이고, 틀린 형태라면 해당 단어만 나올 것 이다.
- url에서 params로 데이터를 가져오면, 형태를 문자열로 가져오기 때문에, 인덱스나 id나 인덱스와 같이 숫자형태로 이루어진 값을 찾으려면, 숫자형으로 변환해서 비교해주어야한다. (const id = parseInt(props.match.params.id);)
board 프로젝트 정리 및 추가적으로 공부할 점 + 향후 업데이트 할 내용
1. 프로젝트 정리:
1-1) 우선 C - R 기능을 만들었고, SET_POST의 개념에 대해 알 수 있었다. (SET_POST는 저장소(서버)에 있는 데이터를 리덕스로 불러와서 넣어주는 작업을 실행한다)
1-2) 이벤트 캡쳐링과 버블링에 대해서도 알 수 있었고, 이를 막아주는 코드도 배웠다.
1-3) 전반적으로 props를 어떻게 가져와서 사용하는지에 대해서도 알 수 있었고, 불변성 관리를 해주는 이머의 종류중 하나인 produce라는 친구도 배웠다. (draft를 사용해서 클론 개념으로 불변성 유지하면서 데이터 변경해주는것)
1-4) props에 들어있는 데이터 중 하나인 match.params를 사용해서 파라미터 url 값을 가져오는 법도 배웠다. (PostDetail페이지에서 해당 게시글에 대한 정보를 전체 게시글 리스트에서 긁어올때 사용)
1-5) 리덕스 사용법도 익혔다. (ACTION_TYPE, 기본값인 initialState, handleActions명명인 리듀서, 그 안에 있는 액션 생성자 addPost와 produce 사용해서 불변성 관리하면서 데이터 추가하기)
1-6) action에 들어있는 paylode라는 객체로 접근해야 그 안에 들어있는 데이터에 접근할 수 있는 것도 배웠다. (postWrite 페이지에서 ref를 사용해서 입력받은 값을 객체 형태인 post로 addPost가 넘겨받았을 때 리듀서에서 action.payload.post를 draft.post_list에서 push메소드를 사용해서 추가해주는 부분)
1-2) 이벤트 캡쳐링과 버블링을 막아주는 코드 예시)
<ListBox
onClick={(e) => {
// 이벤트 캡쳐링과 버블링을 막아주는 코드
e.preventDefault();
e.stopPropagation();
props.history.push(`/detail/${props.id}`);
}}
>1-6 리듀서에서 action.payload.post를 draft.post_list에서 push메소드를 사용해서 추가해주는 부분 코드 예시)
export default handleActions(
{
[ADD_POST]: (state, action) => produce(state, (draft) => {
action.payload.post.id = draft.next_post_id++;
draft.post_list.push(action.payload.post);
}),
},
initialState
);2. 추가적으로 공부할 점
2-1) 리덕스 부분. (특히 configueStore부분. 즉, 스토어 생겨먹은 구조와 동작 형태 + 커스텀 history를 사용하는 이유와 커스텀 history를 사용하기 위해서 무엇을 해야하는지에 대한 부분)
2-2) 뷰 부분..?
3. 향후 업데이트 할 내용
3-1) UPDATE 기능 추가와 DELETE 기능 추가 (CRUD 완성)
3-2) 뷰 부분..? (확실 x)
