[wecode] React - westagram live code review

• vscode에 clone 받아오자마자 확인해야할 파일은 package.json
• npm install을 통해 package.json 안의 dependencies를 다운 받아온다.
• dependencies 안에 명시된 모듈들은 node_modules 폴더 안에 설치되어 있다.
• devDependencies는 개발할 때만 사용하는 것. (devDependencies와 dependencies의 차이 검색해보기)
• clone 받아오고 나면 먼저 Router.js 파일을 통해 필요한 주소 및 컴포넌트들을 확인한다.
• commit push할 때는 console.log를 다 삭제하고 올리는 게 좋다.
• 객체는 연관된 데이터들끼리 하나로 묶기 위해 사용하는 것.
• 반복되는 UI는 항상 map함수로 사용하기.

---

refactoring guide 참고

set-state 는 원래 비동기

batch형 업데이트 -> 이전의 상태를 참고해서 업데이트하는 방법이 더 안정적이기 때문에 함수형을 사용한다.

// 비동기 : count=1
const [count, setCount] = useState(0);
setCount(count+1);
setCount(count+1);
setCount(count+1);

// 동기 (함수형) : count=3
const [count, setCount] = useState(0);
setCount(prev=>prev+1);
setCount(prev=>prev+1);
setCount(prev=>prev+1);

---

좋아요 버튼 기능

// 좋아요 버튼 활성화/비활성화
const [isClicked, setIsClicked] = useState(false);
src={isClicked?'heart.png':'redheart.png'};

---

구조분해할당 정리

const Feed = ({ feed:[id,image,user} }) => {}

// 길어지면 아래에 const로 불러오는 게 가독성이 더 좋다.
const Feed = ({ feed }) => {
	const {id, image, user, ...}
    }

---

댓글 기능 - id(key), 아이디, 댓글내용, 작성시간 받아와서 적용시키기

// 수정 전
const onClickComment = e => {
    e.preventDefault();
    setCommentList([...commentList, input]);
    setInput('');
  };

// 수정 후
const [id, setId] = useState(0);
const [userId, setUserId] = useState('');
const [timer, setTimer] = useState('');

const onClickComment = e => {
    e.preventDefault();
  	setId(prev=>prev+1);
  	setTimer(new Date().getMinutes);
    setCommentList([...commentList, { id: id, userId: userId, userComment: input, postedTime: timer}]);
    setInput('');
  };

---

불필요한 state 정리

// 수정 후
const isValid = userId.includes('@') && userPw.length >= 5;

<button className={isValid ? 'activeBtn' : 'Btn'}/>
<button disabled={isValid ? false : true}/>

---

form태그 사용 시 e.prevent.default 기능 정리

---

mixin

자주 사용하는 속성들을 하나로 묶어서 사용

@mixin flex() {
	display: flex;
	justify-content: center;
	align-items: center;
}

@include flex();

default 속성 명시 가능

@mixin flex($justify:center, $align:center) {
	display: flex;
	justify-content: $justify;
	align-items: $align;
}

@include flex(center, space-between)

• ($justify:center, $align:center): default parameter는 center지만 () 안에 들어오는 것에 따라 유동적으로 변함.
• ($justify, $align)를 명시해놓고 () 빈 상태로 실행하면 에러!