출저

• React 공식문서
• 위코드 강의자료
• 위코드 멘토님들(🥰)

2주동안 배운 React 정리

1. 기초셋팅 에서 유념할 부분
2. .scss 파일에서 기억할 점
3. .js 파일에서 import 순서
4. 변수명은 다른사람도 이해할 수 있도록
5. return문 안에서 map() 직접 적용
6. 그 밖에 기억하고 싶은 것들

1.기초셋팅에서 유념할 부분

1. 기본 폴더 셋팅

   • public폴더 - index.html / images / data
   • src폴더 - components / pages / styles (reset.scss / common.scss) / Routes.js

2. 기본셋팅은 필요한 사항을 미리 체크리스트라도 만들어서 다같이 할 것을 추천.
   (sass파일도 4.0버젼을 받아야 한다는 것은 이미 알고 있었지만 셋팅시 깜박하는 바람에 저렇게 main파일과 다르다는 표시가 생겼다.)

2..scss 파일에서 기억할 점

1. common.scss 와 reset.scss 파일의 import 위치는 index.js 이다. 위와 같이 만드는 파일마다 import 해주지 않아도 된다.

   • 참고로 common.scss 에서 선언해준 변수는 사용할 scss 파일에 import를 해야 사용이 가능하다.
   • 그래서 나는 reset.scss 만index.js 에 넣어주고 common.scss는 import 할 scss 파일마다 넣어주었다.

2. 최상위 태그에 scss의 역할이 없더라도 감싸주어야 한다.

   • 위에 처럼 최상위 태그로 감싸주지 않는다면, scss 특성상 다른 파일의 nav 태그도 영향을 받을 수 있기 때문에 상위태그의 역할이 없더라도 꼭 감싸줘서 nesting 하도록 한다.

3. 위의 input의 focus 와 placehoder 도 nesting 이 가능하다.

3..js 파일에서 import 하는 순서

1. .js 파일에서 import 하는 순서를 기억하자.
   - 위에 처럼 하면 안되고!
   라이브러리 (React 관련 패키지, 외부라이브러리) > 컴포넌트 > 함수, 설정파일 > 사진, 미디어파일, .scss 파일

4. 변수명은 다른사람도 이해할 수 있도록

1. 나름 직관적인 변수명이라 생각하였으나 이건 아니었나보다.
   • 변수명은 협업의 특성상 다른사람이 봐도 무엇을 뜻하는지 추측가능한 명칭이 적절하며, 함수나 변수에는 isliked 와 같이 동사를 앞에 사용하여, 명사처럼 확정된 느낌보다는 동적인 느낌을 전달하는 것이 좋다.

5. return문 안에서 map() 직접 적용

1. 처음의 코드는 render() 와 return() 사이에 map() 함수를 변수로 선언을 하고, 그 변수를 return문 안에 다시 넣어주는 방식이었다. 이는 많은 코드들 사이에 어디에 변수를 넣었는지 찾기 힘들어 유지, 보수 에 용이하지 않았다.

2. 피드백 후 고친 map() 함수의 위치는 변수를 넣어줬던 그 위치로, 그곳에서 바로 map()의 return 이 나오면서 새로운 변수를 만들어주지 않을 뿐더러 코드의 가독성도 용이해졌다.

6. 그 밖에 기억하고 싶은 것들

1. 구조분해 할당

• input 태그에서 value 값을 갖고 오기 위해 e.target 을 사용했다. 중요한건 input 태그가 여러개가 있고 각각의 value값을 가져 오고 싶을때 이 방법을 쓰면 아주 유용하다. 특히, 나는 input태그에 id 값을 주었지만, input태그의 고유 속성인 name 을 써도 무방하다는 것!

2. 함수 하나에 하나의 역할만.

• validation을 체크하는 함수안에 fetch()를 넣어 Main페이지와 연동하는 기능을 구현할때 같이 써주는 것 보다는 fetch()만 따로 밖으로 빼내어 함수로 만들어주는 것이 가독성에 더욱 용이하다.

3. 리스트에서 push를 사용하지 않는 이유

• 리액트는 setstate()를 사용해야 render()를 해주고 이로인해 화면을 바꿔준다. 직접적으로 내가 배열을 더해주는 것이 아닌, setState메서드로 render()를 일으켜야 하기 때문이다.

4. spread 연산자

• js 새로운 문법으로 [...기존배열, 첨가물 ]의 형태로 setState()에서 리스트를 추가해줄때 용이하게 쓰인다.

  let arr = [1, 2, 3]
  let arr1 = [...arr, 4]
  arr1 = [1, 2, 3, 4]

• 위와 같은 원리이고, setState() 와 만나게 되면 아래와 같이 쓰일 수 있다.
• 새로운 댓글을 변수로 따로 받아주고, setState()에는 변하는 상태를 명확하게 볼 수 있도록 이전리스트: [...이전리스트,새댓글] 을 스프레드 연산자를 통해 표현해준 식이다.