[team-03][FE][쥬&도리] 2주차 두 번째 PR

[jwu-ice]

upstream PR 템플릿

안녕하세요. 이브! 저희는

👦 쥬 (@sju02048) 개발 수영 중🏊 쥬입니다.

👱‍♂️ 도리 (@kimyouknow) 도리입니다.

🥕 프로젝트 진행

🤔 dependency

useEffect의 Dependency에 객체를 넣었더니 의도한 대로 동작하지 않는 문제를 발견했습니다. (effect가 실행되지 않거나, effect가 무한으로 실행).

해결: useEffect의 dependency에 넣을 변수는 타입을 주의해서 써야한다는 사실을 알았습니다. (원시타입, 참조타입, 함수 등등)

‼️ hooks Dependency

🤔 useAxios(custom hooks) + 추가 카테고리 렌더링

axios 로직이 반복적으로 사용되고 있어 useAxios 라는 커스텀 훅을 만들어봤습니다.

문제점

• hooks를 utils 함수처럼 생각했는데, useEffect와 useState 같은 hooks들도 내부에 숨겨져 있어서 로직을 한 눈에 보기 어려웠습니다.
• axios를 호출하는 곳 api가 다르다보니까 response 데이터가 달라서 관리하는데 어려웠습니다.
• axios를 호출하는 곳마다 데이터 관리 로직이 다른 점이 어려웠습니다. (어떤 컴포넌트는 respone 값을 그대로 렌더링하지만, 어떤 컴포넌트는 배열상태에 response 값을 추가해서 렌더링)

🤔 map렌더링

현재 Main컴포넌트에서 mealsArr라는 배열에 데이터가 들어 있고, 해당 데이터를 Array.prototype.map을 활용해 컴포넌트를 생성하고 있습니다. 이 때, mealsArr에 새로운 데이터를 추가되면 추가 컴포넌트를 렌더링할 때 기존 요소는 다시 렌더링하지 않고 새롭게 추가된 컴포넌트만 추가 렌더링하려고 했습니다.

const Main = () => {
	const [mealsArr, setMealsArr] = useState([]);
	const AddElementToArray = (newElement) => {
		setMealsArr(prev => [...prev, newElement]);
	}
	return (
		<ul>
			{mealsArr.map(element => <ChildComponent key={element.key} />)}
		</ul>
	)
}

mealArr에 새로운 요소가 추가되었을 때, 기존 요소까지 전부 새롭게 렌더링이 되었는데 setMealsArr()

를 실행할 때 ...prev를 사용해서 기존 값을 복사해서 일어나는 문제일까요? (React.memo로 ChildComponent를 감싸도 해결되지 않았습니다 ㅜㅜ)

아래와 같이 const로 변수를 선언했을 때는 mealsArr에 데이터는 추가되지만 추가한 데이터는 화면에 렌더링이 되지 않는 문제가 발생했습니다.

const Main = () => {
	const mealsArr = [];
	const AddElementToArray = (newElement) => {
			mealsArr.push(newElement);
	}
	return (
		<ul>
			{mealsArr.map(element => <ChildComponent key={element.key} />)}
		</ul>
	)
}

🤔 css in js

스타일 관련 코드를 리팩토링한다고 할 때 관리하는 주체가 누구일까요?

1. styled-componment를 사용해서 css를 적용하고 있습니다! 이렇게 하면 프론트엔드에서 js로직(props, theme.js)를 쓰면서 관리하게 되는데, 프론트 엔드 개발하시는 분만 알아볼 수 있게 코드를 짜면 될까요? 디자이너나 퍼블리셔도 고려해서 코드를 짜야하는지 궁금합니다.
2. css변수 관리 방법이 궁금합니다! 저희는 테마 색깔, 폰트 사이즈 등등 반복적으로 쓰는 변수들을 theme에서 관리했습니다. 그런데 특정 영역에서만 쓰는 margin이나 padding, px값이 생겼는데 줄여야 할까요? 아니면 rem같은 단위로 써야 좋을까요?
3. themeProvider를 사용하다 theme 자체를 utils 처럼 import하면 어떨까 생각했는데, 기능적인 부분은 같다고 생각하지만 차이를 있을까요?

const SomeStyled = styled.div`
	margin: 8px;
	backgroundColor: ${(props) => props.theme.color.mainColor};
`

[eve712]

/api/login 같은 URL관련 문자열들은 따로 모아놓으면 좋지 않을까 싶어요

[eve712]

이 부분은 수정요청은 아니고, 팁인데요🌱
z-index도 글로벌 스타일로 미리 정해두고 사용해도 좋아요. 예로 50, 100, 150, 200, 250~ 이렇게 정해두고, 이 z-index값은 어떤 컴포넌트들에 해당하는지를 생각을 미리 해두는 거에요. 그리고 해당 컴포넌트에서 변수로 가져다 쓸 수 있겠죠. z-index: 100 이렇게 사용하면 프로젝트가 커졌을 때 어디에 어떤 값들을 줬는지 파악하기 어려울 수 있을 것 같아서 말씀드려봤습니다:)

[eve712]

handler는 이벤트 핸들러를 의미하는데 open, close가 붙어서 어색한 부분이 있는 것 같아요. clickHandler나 openModal는 어떨까 싶어요.

[eve712]

border color가 빠졌네요

[eve712]

이건 제가 궁금해서 질문드리는건데요! mounted 상태와 useRef 사용 없이는 포탈 사용에 문제가 있으셨나요?

[eve712]

아 그리고 저는 Portal의 존재를 최근에 알고 사용했었는데 이걸 사용하신 게 멋져요..!!🤩

[eve712]

map렌더링 질문

const로 선언한 mealsArr는 상태가 아니라 변수이기 때문에 리렌더링이 되지 않아요. 서버가 연결이 안 돼서 서버로부터 받은 응답을 확인할 수 없는데 응답으로 받는 요소들의 id는 모두 다른가요?

스타일 컴포넌트 질문

1. styled-componment를 사용해서 css를 적용하고 있습니다! 이렇게 하면 프론트엔드에서 js로직(props, theme.js)를 쓰면서 관리하게 되는데, 프론트 엔드 개발하시는 분만 알아볼 수 있게 코드를 짜면 될까요? 디자이너나 퍼블리셔도 고려해서 코드를 짜야하는지 궁금합니다.
   • 회사마다 다를 수 있는데 제 회사 기준으로만 말씀드릴게요. 디자이너분은 코드를 직접 보시지 않아요. 피그마로 UI, UX 관련한 것들을 만들어주시고, 웹퍼블리셔분이 계시지 않아서 프론트엔드 개발자가 전부 만듭니다. 그래서 프론트엔드 개발자가 관리합니다.
2. css변수 관리 방법이 궁금합니다! 저희는 테마 색깔, 폰트 사이즈 등등 반복적으로 쓰는 변수들을 theme에서 관리했습니다. 그런데 특정 영역에서만 쓰는 margin이나 padding, px값이 생겼는데 줄여야 할까요? 아니면 rem같은 단위로 써야 좋을까요?
   • 특정 영역에서만 쓰이는 것들이 있을 수 있죠 모두 다 같을 수 없으니까요. 그런 부분은 꼭 줄일 필요는 없습니다. 제 팀에서는 margin, padding은 px 절대값으로 쓰고 있어요. 컴포넌트 내에서 반복된다면 해당 파일에 변수로 지정해주고 있습니다.(회사마다 팀마다 다를 수 있으니 참고만 해주세요ㅠ)
3. themeProvider를 사용하다 theme 자체를 utils 처럼 import하면 어떨까 생각했는데, 기능적인 부분은 같다고 생각하지만 차이를 있을까요?
   • 저도 이 부분은 찾아봤는데요 import를 하게되면 파일마다 경로가 다르게 되기도 하고, theme 파일을 이동 시 모든 경로를 수정해야 하는 부분에 불편함이 있다는 정도인 것 같아요.
   • https://spectrum.chat/styled-components/general/themeprovider-vs-custom-imported-theme-file~9e4b8bbf-dadb-4e98-95c1-0958e67b25b0