[1차 프로젝트] 멘토님께 받은 리뷰 정리( useState, 주석없애는 이유,조건부 렌더링 (&& 연산자), JSON.parse( )매서드)

위코드에서의 1차 프로젝트를 하며 멘토님께 받았던 리뷰를 간단하게 정리하고, 

 

내가 뭐가 부족한지 알아보는 시간을 가져보았다. 🌝

 

코드...진짜 알면 알수록...어렵지만,, 또 재미있는...ㅠ ^ㅠ

 

 

 

1. useState   

setState 함수의 인자로는 

 

 

1. 새로운 state가 될 값
2. 콜백함수 () => {}

 

 

 

두가지 유형의 인자를 전달할 수 있는데, 

 

콜백함수를 인자로 전달한다면 콜백함수는 인자로 이전의 state값을 전달받고 함수에서 return 한 값이 새로운 state가 된다.

 

 

 

장점

- 이전 state 값을 명시적으로 기억할 필요가 없음
- 함수가 호출될 당시 최신의 state값이 인자로 전달되므로 비동기 상황에서 안정적

 

 

위와 같은 이유들로 인해 이전 state 값을 이용해서 새로운 state값을 만드는 경우에는 콜백함수를 인자로 전달하는방식으로 적용 해야한다.

 

 

 

예시적용)

setState(newState); // 1. 새로운 state가 될 값을 인자로 전달하는 경우
setState(prevState => newState); // 2. callback함수를 인자로 전달하는 경우

//
const [count, setCount] = useState(0);

// ver.1
const increaseCount = () => setCount(count + 1);

// ver2.
const increaseCount = () => setCount(prevCount => prevCount + 1);

 

 

 

 

2. 주석 삭제 

불필요한 주석은 삭제해야한다.

 

코드가 주석처리된 채로 남아있다면 필요한 상황에 제대로 사용되거나 삭제되는 일은 거의 없고 결국 계속 남아있게 되는데,

 

그러다보면 이제 작성한 사람이 아닌 다른 개발자는 필요한 코드라서 주석처리한게 아닐까? 라는 생각으로 지우지 못하고

결국 그 누구도 왜 있는지는 모르면서 계속 남아있는 불필요한 레거시가 되어버리기 때문!!!!

 

따라서 반드시 필요한 경우가 아니면 코드를 주석처리하기보다는 삭제해주시고 만약 다시 보고싶다면 커밋 이력에 잘 남겨뒀다가 원하는 시점에 다시 보면 된다고 한다! 

 

 

 

 

 

 

3. 조건부 렌더링 (&& 연산자)

삼항 연산자 x 

 

 

true 케이스만 처리하면 되는경우, 굳이 삼항연산자로 true, false 케이스 모두 처리하여 null을 반환할 필요없이  

 

조건부 렌더링 (&& 연산자)을 활용하면 불필요한 코드를 없애 더욱 가독성에 좋아진다. 

 

 

 

: 논리 && 연산자로 If를 인라인으로 표현하기

공식문서에 따르면. JSX 안에는 중괄호 { } 를 이용해서 표현식을 포함 할 수 있는데, 

그 안에 JavaScript의 논리 연산자 &&를 사용하면 쉽게 엘리먼트를 조건부로 넣을 수 있다.

라고 나와있다. 

 

 

 

이유는

JavaScript에서 true && expression은 항상 expression으로 평가되고

false && expression은 항상 false로 평가되고

 

따라서 && 뒤의 엘리먼트는 조건이 true 일때 출력이 되기 때문이다. 

만약, 조건이 false라면 React는 무시하고 건너뛴다니 참고하자! 

 

true ? foo : null => true && foo // true인 경우에 foo 요소를 렌더

 

 

예시) 

 

위 unreadMeassages.lengh 가 0 이 아니기때문에  그 해당 { }안에 있는 함수가 실행됨.

 

 

• 참고 : 공식문서 조건부 렌더링(https://ko.reactjs.org/docs/conditional-rendering.html

 

 

 

 

 

 

 

4. JSON.parse() 매서드

 

JSON 객체의 parse() 메서드를 사용한 것으로, 

 parse() 메서드는 JSON 문자열을 인자로 받고 결과값으로 JavaScript 객체를 반환한다.

 

 

 

 

 

 

예시1)

 

const json = '{"result":true, "count":16}';
const obj = JSON.parse(json);

console.log(obj.count);
// Expected output: 16

console.log(obj.result);
// Expected output: true

 

 

 

 

예시2)

 

JSON 문자열을 data 라는 변수에 저장

const data = `{
  "name": "Hayley",
  "age": 29,
  "married": false,
  "family": { "father": "이땡땡", "mother": "장땡땡" },
  "hobbies": ["산책", "음악듣기"],
  "jobs": null
}`;

 

 

 

JSON.parse( ) 에 data 인자를 넘겨서 호출하고, 결과 값을 obj 라는 변수에  에 저장

const obj = JSON.parse(data);

 

 

 

 

이때, console.log(obj); 결과 

{
    name: "Hayley",
    age: 29,
    married: false,
    family: {
        father: "이땡땡",
        mother: "장땡땡"
    },
    hobbies: [
        "산책",
        "음악듣기"
    ],
    jobs: null
}

 

 

 

 

---

 

 

++ 추가로 백엔드 API 와 통신할때 헤맸던 토큰 저장 정리

// 로컬스토리지에 토큰 저장하기
localStorage.setItem("itemName", token)

// 로컬스토리지에 토큰 가져오기
const token = localStorage.getItem("itemName")

// 로컬스토리지에 토큰 삭제하기
localStorage.removeItem('itemName')