props.. 다들 잘 하는 props 나만 이해하기 어렵다..
오늘도 props를 이해하기 위해 연습해 봤다.
그리고 이미지 업로드를 구현했다.
오늘도 알차게.. 트러블 슈팅했다 ..!
1. export, default, { } 생략
props를 사용해보기 위해 컴포넌트를 하나 만들었다.
const One, const Two 두 개의 컴포넌트를 만들고 export를 시도했는데 ..
둘 다 export가 되지 않았다.
이유를 찾아보니 export 할 때 하나의 컴포넌트만 default 할 수 있었다 !
그리고 이렇게 default 를 사용했을 경우,
import 해 올 때 { } 중괄호가 생략이 가능하다.
그럼 Two 는 어떻게 export 해야할까 ?
애초에 만들때 export 를 앞에 선언하고 만들 수 있었다.
사실 알고는 있었지만 응용력이 떨어져서 .. 알면서도 헤맸다 ..
이런 식으로 default 없이 export 해 올 경우,
중괄호 { } 안에 넣어서 import 해야 한다.
#2. 폴더, 파일 네이밍 문법
조금 뜬금없지만 계속 헷갈려서 확실하게 정리하고 넘어가고자 한다.
3. props 부모 --> 자식
여기서 나는 One의 props 를 Two에게 전달해주고자 했다.
하지만 실패했다.
이유는 One의 props를 Two에게 전달해주는 코드도 없을 뿐더러,
이 둘의 관계가 부모 자식 관계가 아닌, 형제 관계였기 때문이다.
props의 성질은 부모 --> 자식 에게 전달해주는 구조를 가졌기 때문에 실행되지 않았다.
이렇듯 ,
practice2 라는 부모 컴포넌트 안에
Test 와 Hello 라는 자식 컴포넌트가 있어서,
practice2 가
---> 자식컴포넌트들에게 각각 name="부모님1", name="부모님2" 라는 값을 전달해주는 것이다.
그렇기 때문에 Hello 라는 자식 컴포넌트가 practice2 로부터 props 를 받아올 수 있게 됐다 !
styled-component 에서도 받아온 { name : 부모님1 } props 로 활용해서 css 를 짤 수 있다 !
4. postman 사용법
나는 이론에 약해서 늘 실습을 해봐야 외우는 것 같다 ..
자꾸 웹에서 500 에러가 나서 내 잘못인가 postman 을 돌려봤다.
그 순서를 잊지 않기 위해 적어보고자 한다.
복사해서 포스트맨의 Authorization 의 Token에 붙여넣는다.
Send 버튼을 누르면 request가 돌아간다.
잘은 모르겠지만 백엔드 측과 협의해봐야 하는 에러같다.
415 에러 말고도 다른 무수한 에러들이 많이 일어난다.
웹에서 에러가 난 후 포스트맨까지 확인해 봤을 때,
포스트맨까지 에러가 난다면 높은 확률로 백엔드 측 오류이기 때문에 백엔드와 소통해봐야 한다.
혹여나 API 명세서대로 쓰지 않았거나, ID 값을 잘못 보냈거나, 백엔드 측에서 서버를 닫았거나, API 주소를 잘못 알려줬거나 등등 잘못 SEND 했을 경우 이런 에러가 난다.
이것은 페이지가 아예 없다는 뜻이기 때문에 무조건 백엔드 분들께 말씀 드려야 한다!
5. focus, blur
내가 구현하고 싶은 것은
처음엔 textarea 가 비활성화 되어 있다가,
수정하기 버튼을 누르면
textarea가 자동포커스로 깜박거리고,
적용하기 버튼을 다시 누르면 포커스가 비활성화 되는 기능을 구현하고 싶었다.
그렇기 위해서는 우선 textarea에 useRef를 줘야 했다.
그리고 원래는 수정하기 버튼을 누르면 바뀌도록 button onClick에 함수를 줘야했지만,
이미 수정하기 --> 적용하기 css를 바꾸도록 setActive 를 준 상태였다.
그래서 form 데이터로 보내려고 onSubmit 으로 코드를 짰는데 ..
좀 난해해서 나중에 다시 만져봐야겠다.. 우선 지금으로써는 form 으로 updataDesc 를 보냈다.
그리고 삼항연산자와 blur, focus 를 이용해서 actived 여부에 따라 포커스를 on/off 했다 !
6. Image 1장 업로드(프로필)
프로필 이미지 1장을 업로드 하기 위한 함수를 만들었다.
리덕스로 id, fornData, config 를 보냈다.
html의 img는 백엔드에서 내려주는 data 중 img 부분을 넣었다.
1. 백엔드에서 { } 객체 안에 이미지 url 을 넣어주므로 response.data.url 로 데이터를 넣어줬다.
2 - 1. html에서 profileList.imgPath 로 받기 때문에 imgPath : imageUrl 로 받아야 한다.
2 - 2. 이름(imgPath)을 주려면 { } 객체로 감싸야 한다
--> {imgPath : imageUrl} = action.payload
info = 객체 { }
이므로 state.info = action.payload 와 같은 equal(등호)를 써야한다.
* 만약 info : [ ] 였다면? (배열이었다면?)
---> push, filter, map 과 같은 배열이어야만 돌릴 수 있는 함수를 사용해야 한다 !
uploadPhoto 에서 그냥 state.info = action.payload 로 하면,
setProfile 의 데이터 뿌려줄 때와 겹친다.
1 ) ...state.info ?
--> 기존의 state.info 데이터 값을 그대로 유지하기 위해 작성
2 ) ...action.payload ?
--> action.payload = {imgPath : imageUrl} 객체 이므로 중괄호를 벗기 위해 스프레드 문법 사용
7. spread 문법
obj2의 name 값을 변경하고 싶은데,
1. const obj2 = { ...obj, name : "test"}
2. const obj2 = { id : 1, name : hello", name : "test" } // 두 가지가 동일한 문법이다.
그렇기 때문에 1번과 같은 spread 문법을 사용해서 새로운 객체에, 변경된 값을 적용한다.
= 원본에서 바꾸지 않을 부분은 유지하고, 바꿀것만 바꾼다.