React에서 map 메서드 쓸 때, key prop을 사용해야 하는 이유?

프론트엔드 개발을 할 때, UI에 반복되는 구조를 하드코딩 하지 않고 Map 메서드를 사용해서 구현하는 경우가 매우 많다. 배열이나 객체로 된 데이터를 서버 혹은 상수데이터로 받아와서 동일한 UI 구조에서 데이터만 다르게 표시되도록 구현하는데 이 과정에서 map 메서드를 사용하게 된다. 이 때, 가장 부모요소에 key prop을 기입하게 되는데, 왜 이 key prop이 필요한 걸까? Problem {SampleData.map((el)=>{ return ( {el.title} ) })} 위와 같은 형태로 UI를 구성했다고 가정해 보자. 현재 SampleData라는 데이터를 map 메서드를 이용해 주고, 데이터 안에 있는 요소 중 title이라는 데이터를 화면에 그려주고 있다. 이러한 상태에서 개발 서버를..

• format_list_bulleted Stack/REACT
• · 2023. 9. 14.
• textsms

[TypeScript] props로 setState 넘겨주는 방법

react.js를 사용하면서 아래왜 같은 경우가 굉장히 다분하게 있을 것이다. 부모 컴포넌트에서 만든 state를 변경하는 setState를 자식 컴포넌트로 내려서 사용하는 것 이런 경우가 굉장히 많기에, 우리는 react.js에서 이렇게 사용해왔다. // Parents.js const Parents = () => { const [state, setState] = useState(""); return ; }; // Child.js const Child = ({setState}) => { return {setState("1")}}>클릭; }; react.js에서는 편-안하게 props로 넘겨주고 사용해서 부모에 있는 state를 변경할 수 있었다. 그런데.. Typescript에서는 그렇지 않았다.. Pr..

• format_list_bulleted Stack/TS
• · 2023. 4. 17.
• textsms

[TypeScript] scss module 사용할 때, 발생하는 에러 해결하기

Problem Typescript로 초기 세팅을 마친 후 본격적인 프로젝트에 돌입..! 하자마자 에러가 터졌다 scss 사용할 때 module 쓰려고 기존에 사용하던 방식처럼 적용했는데 빠른 에러메세지와 함께 시작부터 발목을 잡아버리는 사태가 벌어졌다. Vscode에서 보니까 '모듈 또는 해당 형식을 찾을 수 없다' 라는 메세지가 나온 것을 발견했는데, 어떻게 해야할지 모르겠어서 바로 구글링을 시전했다. 한 5분정도 구글링을 했을까? 바로 딱 원하는 해결 방법을 찾아내 버렸다 ㅎㅎ ChatGPT를 사용할 때도 그랬지만, 정확한 질문이 얼마나 중요한지 또 다시 느껴버린 순간이었다. Solution 해결 방법은 의외로 간단했다. src 폴더 아래에 하나의 파일을 만들면 됐다. src 폴더 아래 global...

• format_list_bulleted Stack/TS
• · 2023. 4. 17.
• textsms