React로 개발하다 막힐 때, 커리어리 Q&A

React 토픽

BETA OPEN

20명의 리액트 서포터즈가 빠른 답변을 달아드려요

Q. 리액트에서 타입스크립트 사용할 때 이런 경우 타입을 어떻게 줘야할지 모르겠습니다

리액트와 타입스크립트를 연습해보려고 혼자 토이프로젝트를 만드는 중인데 어떤 타입을 지정해줘야 할지 모르겠어서 질문올립니다. 혹시 더 자세한 설명이 필요할 것 같으면 댓글부탁드려요! 상황) 리액트, 타입스크립트를 사용하는 프로젝트에서 부트스트랩 모달을 사용하려고 합니다. 사진1번이 모달을 포함하고있는 부모컴포넌트, 사진2번이 모달컴포넌트 인데 부모컴포넌트에서 모달컴포넌트로 show, onHide라는 2개의 props를 넘깁니다(부트스트랩에서 지정해놓은 프롭스입니다.) 부모컴포넌트에는 모달의 표시 여부를 관리하는 const [showEmptyInputModal, setShowEmptyInputModal] = useState(false); 이라는 상태값이 있고 그게 각각 props로 넘겨지게 되는 것 같습니다. 여기서 문제) 그런데 사진2번에 넘겨주는 props의 타입을 어떻게 설정해야할 지 모르겠습니다... 일단 any로 하면 작동은 되긴하는데ㅠㅠ any는 최대한 쓰지 않는게 좋다고 해서요 사진4번의 빠른 수정을 보면 이런 옵션들이 있던데 unknown이나 never를 사용하면 그 props를 사용하는 곳들에서 에러가 납니다. any를 사용하거나 빠른 수정의 옵션 중 eslint 규칙을 무시하는 선택지밖에 없는 걸까요? state와 setState를 실행하는 함수 props로 넘기려면 타입을 어떻게 줘야하나요...!

추천 2

10시간 전 • 조회 50

#react

#typescript

2

답변

Q. 리액트 axios로 api 호출해서 파일 url을 받았는데요, 이걸 다운로드할 수 있을까요?

<a> 태그를 사용하여 파일을 다운로드하려고 하니, 새 창에서만 열리고 다운로드는 되지 않는 문제가 있습니다. <a href= { fileData.map((e)=>{ return ( e.fileurl ) }) } download> 다운로드 </a> 대략적인 코드는 아래와 같습니다. axios로 api를 호출하면, json 형식으로 간단한 파일 정보와 파일 url이 넘어오는 구조입니다. [ { "id": "1", "fileurl": "https://도메인/filename", }, ] /** 파일 정보 가져오기 */ const [fileData, setFileData] = useState([]); const FILECONFIG = { method: "POST", // [요청 타입] url: "/apiURL", // [요청 주소] params: { "id" : id, }, // [요청 데이터] headers: {}, // [요청 헤더] } // [axios 요청 수행 실시] useEffect(() => { const fetchData = async () => { const response = await axios(FILECONFIG) .then(function(response) { setFileData(response.data); }) .catch(function(e) { console.log(e); }); }; fetchData(); }, [id]);

추천 4

하루 전 • 조회 111

#react

#axios

#api

3

답변

Q. 리액트 axios로 받은 데이터 state에 담아서쓰기

제가 혼자 포폴만들어볼 겸 만들어보는중인데 데이터 자료들은 서버를 만들진못해서 json으로 깃허브에 올려서 사용중입니다. 깃허브에 올려둔 json을 axios로 받아와서 state에 넣어서 사용하려는데 에러가나서 질문합니다..ㅠ 코드는 현재 사진처럼 작성했는데요 에러가나는게 저렇게 작성했을 땐 에러가안나는데 SwiperSlide 태그 안에 img에 puzzledata[0].img를 [1], [2], 로 변경하면 그때 에러가납니다. 아마 위에 puzzledata 이름으로 만든 state에 임시로 만든 배열객체를 늘려주면 에러가 고쳐질거같긴한데 좋은방법인지 잘 모르겠습니다.. 보통 이럴땐 어떻게 코드를 수정하나요? 에러가 나는이유가 useEffect로 데이터를 변경해주기전에 html을 구성해버려서 에러가 발생하는것같은데 맞나요? 해결방안을 알려주시면 감사하겠습니다!.. 상단에 import는 다 해왔습니다.

추천 1

하루 전 • 조회 65

#react

#axios

#에러

1

답변

Q. next.js를 실무에서 많이 쓰나요?

안녕하세요, React를 이제 막 시작한 학생입니다. React를 배우다보니 next.js관련 키워드가 많은 것 같더라구요. 커리어리에도 next.js 질문이 많네요. next.js를 실무에서 많이 쓰나요? 만약에 그렇다면 react를 배우기 전에 먼저 next.js를 배우는게 좋을까요? 좀더 효율적으로 공부하고싶은데 고수님들의 답변을 듣고 싶습니다. 감사합니다!

추천 2

2일 전 • 조회 149

#react

#next.js

4

답변

Q. html 타임리프로 웹 화면 구성중인데, 함수가 선언이 안돼요 ㅠㅠ

백엔드 공부하는 학생입니다. html언어를 잘 아는건 아닌데, 타임리프를 써서 그런건지 모르겠는데, todolist 웹 화면을 구상중인데, <td><button 부분을 보면 [[$(todoentity.id}]] 부분이 오류가 나고, 스크립트 아래의 함수 자체가 선언이 안되네요... 이유가 뭔가요?ㅜㅜ

추천 1

2일 전 • 조회 51

#html

#thymeleaf

1

답변

Q. react 관련 오픈소스 이력이 필요한가요?

요즘 취업 공고에 우대사항에 "오픈소스 기여 활동"이 적혀있더라고요. 오픈소스 기여 활동이 큰 메리트가 되나요? 관련해서 추천할만한 react 관련 오픈소스 라이브러리나 오픈소스 기여할 때 주의할 점, 꿀팁 같은거 있으시면 공유 부탁드립니다. 감사드립니다 :)

추천 1

2일 전 • 조회 69

#react

1

답변

Q. python(while, break, class) 문제 풀어주실 수 있나요?

1. (첫 번째 사진이 문제 내용입니다.) 사용자 정의 함수를 만들고 함수안에 While문과 break를 활용하여 아래 조건과 같은 프로그램을 만드세요. 2. (두 번째 사진이 문제 내용입니다.) 아래의 조건에 맞는 클래스 Car를 만들고, 출력결과와 같이 객체를 생성하세요. 3. (세 번째 사진이 문제 내용입니다.) 2 에서 객체를 생성하고 <출력결과>와 같이 메서드를 호출하세요.

비추천 6

3일 전 • 조회 164

#python

#문제풀이

#while

#break

#class

1

답변

Q. react 오픈소스 UI 라이브러리 쓰시나요?

이번에 사이드 프로젝트에 새로 합류하게 되었는데, 전임 프론트 개발자 분이 Ant Design을 적용해놓고 가셨더라고요. 프로젝트 코드도 다 Ant Design 컴포넌트들로 적용이 된 상태입니다. 저는 사실 회사에서 이런 UI 라이브러리를 써본적은 없고 bootstrap 이나 tailwindcss로 구현된 내부 컴포넌트들 밖에 안 써봤는데요. 혹시 실제 사용하는 서비스에서도 Ant Design 같은 UI 라이브러리를 사용하는지 궁금합니다! 추가로 최근 Storybook을 잠깐 봤는데, 이거는 UI 라이브러리인가요?

4일 전 • 조회 100

#react

#ant-design

#storybook

2

답변

Q. React Native에서 class component vs Function component

안녕하세요 저는 react로 웹 개발을 하다가 최근에 react native 앱 개발을 하는 곳으로 이직했습니다 처음 react를 배울 때도 17버전이어서 함수형 컴포넌트로 배우고 공식 문서에도 함수형을 권장하던데 요번 회사에서는 전부다 클래스 형으로 되어있어서 react native에서는 클래스 형이 더 좋은지 궁금합니다. 또한 클래스를 함수형으로 리팩토링하게 된다면 팁 같은 게 있을까요? 선배님들의 조언 부탁드립니다.

4일 전 • 조회 57

#react

#react-native

1

답변

Q. react-native에서 html을 렌더링 하는 방법이 있을까요?

안녕하세요, react를 사용하다가 이번에 앱을 개발하기 위해 react-native 튜토리얼을 공부하고 있습니다. react-native는 View, Text 같은 jsx엘리먼트를 사용하는 것으로 알고 있는데요, 서버에서 string에 html형식으로 담긴 데이터를 그릴 수 있는 방법이 있을까요? 이미 구현된 react 웹사이트에서 글 작성시에 html로 DB에 저장하고 보여주고 있습니다. 이 데이터를 그대로 사용하고 싶은데 react-native는 태그형식이 다른 것 같아서 어떻게 해야하는지 궁금합니다.

5일 전 • 조회 148

#react

#react-native

2

답변

Q. React toast 구현 관련

안녕하세요. Toast 관련해서 질문이 있습니다. toast를 띄워놓은 상태에서 페이지의 이동이 가능한지요? 현재 진행중인 프로젝트의 상황을 설명 드리겠습니다. 회원가입을 하면 “회원가입완료” 라는 alert창 대신 toast를 띄우고 싶은데요. 라이브러리를 쓰지않고 구현을 해보려고 합니다. 다만 회원가입창의 구조가 여러 겹으로 되어있습니다. Route path는 1개 입니다. Url주소가 같은 상태에서 다음버튼을눌러가면서 인풋창에 정보를 기입하게 되는데요. 최종페이지에서 회원가입 버튼을 누르면 로그인이 동시에 되면서 toast가 뜨도록 구현하고 싶습니다. 시도해본 바로는 modal처럼 페이지 위에서 띄우는건데 그마저도 안뜨고 있긴 합니다… 회원가입과 동시에 로그인이 되어도 바로 메인화면으로 가지 않고 url때문인지 최초의 회원가입 입력페이지를 한번 그려줬다가 메인페이지로 로그인 되어 들어갑니다. 검색을 해도 명확하게 나오지 않는 부분이 있어서 질문해보았습니다ㅠ 토스트를 어디에서 띄우는 것이 현명한 방법일지 몰라서 시도는 해보고 있는데 시간도 촉박합니다.. 라이브러리를 쓰는것이 나을까요..?

추천 2

11월 30일 • 조회 122

#react

#toast

#react-query

#recoil

2

답변

Q. 공부하기 좋은 next.js 오픈소스 프로젝트 추천해주실 수 있나요?

혼자서 프론트엔드 공부하고있는 취준생입니다. 면접 전에 실무에 근접한 프로젝트를 하나 만들고 싶은데 혼자서는 어려울 것 같습니다. 얼마전에 본 영상에서 오픈소스로 공부하는게 도움이 된다고 해서 찾아보는데 쉽지 않습니다. *혹시 오픈소스로 공부해보신 분이 있으시다면 몇 가지 추천해주실 수 있으신가요?* 실무에서도 참고하는 프로젝트면 좋을 것 같아요. 폴더구조, 컴포넌트 네이밍, assets관리 같은 것 어떻게 하는지 배우고 싶습니다.

추천 4

11월 29일 • 조회 223

#react

#asset

1

답변

Q. next.js swr vs react-query 어떤 라이브러리를 선택해야 할까요?

안녕하세요, next.js로 처음 프로젝트 시작하는 초보 개발자입니다! 지금까지 React로만 개발해오고 상태관리 라이브러리는 Redux만 사용해봐서 이번에 새로운 라이브러리를 사용해보려고 합니다. next.js에서는 swr이나 react-query를 자주 사용한다고 하는데 어떤걸 쓰면 좋을까요? 장단점이나 여러가지 알려주시면 감사하겠습니다🙌

추천 2 • 비추천 1

11월 29일 • 조회 198

#react

#next.js

#react-query

#swr

#library

2

답변

Q. RN targetSdk 31 시 빌드 에러

안드로이드 정책 변경에따라 sdk를 31로 올렸습니다. android:exported는 다 세팅했고 빌드에서 에러는 발생하지 않지만, android 8,10은 정상 동작하지만 12는 앱실행시 바로 종료되는 현상이 있습니다. 혹시 방법 아시는 분 계시나요?

추천 2

11월 28일 • 조회 70

#react

#react-native

#android

#targetsdk

1

답변

Q. 리액트 스프링 이미지

현재 프로젝트에서 프론트에서 이미지를 업로드해서 폼데이터로 변환후 스프링으로 넘겨주고 스프링에서 데이터베이스에 저장후 프론트에서 요청시 다시 넘겨줘야하는데 프론트에서 요청시 스프링에서 스트링형식으로 넘겨줘서 바로 img태그에 src에 넣으면 되는지 아니면 다시 폼데이터형식으로 넘겨줘서 프론트에서 가공을 해줘야 하는것인지 정확한 방법을 모르겠습니다 ㅜ

추천 3

11월 28일 • 조회 143

#react

2

답변

Q. id 사용에 대한 문의

html의 경우 class대신 className으로 대체하는 것처럼 id는 어떻게 가능한지 모르겠네요 ㅠㅠ 특히 css에서는 #idname 그대로 쓰는게 맞는지 아니면 어떻게 써야되는지 궁금합니다

11월 26일 • 조회 169

#react

2

답변

Q. react-native에서 shadow thread가 무엇인가요?

react-native의 동작 원리를 공부하다가 shadow thread라는 개념을 접했습니다. 제가 본 글에서는 1) App 시작, 메인 스레드 실행 2) 메인 스레드가 JS 번들 로드 3) JS로딩이 성공하면 React를 렌더링하고 버츄어돔 생성 4) 버츄어돔을 Shadow thread로 보냄 5) 레이아웃 계산이 끝나면 메인 스레드로 다시 보냄 6) 메인 스레드가 UI를 그리고 비즈니스 로직 실행 여기서 버츄어돔을 Shadow thread로 보낸다고 하는데 Shadow thread는 어떤 역할을 하나요?

추천 2

11월 25일 • 조회 81

#react

#react-native

1

답변

Q. React Icon은 저작권을 가지고 있나요?

React Icon 홈페이지에도 나오지 않고 GitHub에도 언급이 안되어서 여쭤봅니다. 혹시 React Icon을 상업적으로 홈페이지에 사용해도 저작권에 걸리지 않나요?

추천 2

11월 25일 • 조회 141

#react

1

답변

Q. [JS] arguments는 어째서 유사 배열 객체인가요?

안녕하세요, Javascript에서 함수의 인자는 arguments라는 배열로 알고 있습니다. 하지만 실제 배열이 아니라 유사 배열 객체임을 알게 됐는데요, arguments는 어째서 유사 배열 객체 형태를 띠는건가요? 이로 인해 얻는 이득이 뭔지도 궁금합니다! 감사합니다.

추천 4

11월 25일 • 조회 148

#javascript

2

답변

Q. 리액트 컴포넌트 크기

리액트에서 컴포넌트들의 width height를 지정할때 px로 지정해서 창크기마다 다르게 지정하는것과 %, vh로 지정하는것중 어느것이 더 좋은 방법일까요?

추천 3

11월 24일 • 조회 165

#react

1

답변

Q. next.js hydrate가 무엇인가요? (Did not expect server HTML to contain the text node)

안녕하세요 next.js로 개발하고 있는 1년차 뉴비 프론트엔드 개발자입니다. 페이지에서 간헐적으로 문구가 안보이는 이슈가 있어 콘솔을 확인해보니 'Did not expect server HTML to contain the text node' <- 이런 에러가 발생하고 있었습니다. 검색하다가 hydrate하는 과정에서 mismatch가 생겨서 발생한 에러라는 영어 댓글을 보긴 했는데 hydrate에 대한 설명을 찾아봐도 너무 어렵더라구요.. 혹시 간단하게라도 hydrate에 대해 설명해주실 수 있으신가요? 또 'Did not expect server HTML to contain the text node'에러는 왜 발생했는지 궁금합니다..

추천 3

11월 24일 • 조회 129

1

답변

Q. useEffect에 addEventListener를 사용할때 계속해서 event가 발생하는것이 rendering이 여러번되는 것보다 좋은건가요?

Scroll이 50 위로 올라갔을때 state를 false에서 true로 변경해주는 코드를 만들었습니다. 물론 다시 50 밑으로 내려가면 state를 true에서 false로 변경해줄 것입니다. 해당 방법에서 console을 찍어보면서 느낀 것이 있습니다. 리렌더링은 당연히 state가 변경될때만 진행되었습니다. 하지만, 이벤트리스너는 scroll이라는 이벤트를 계속 만족시켜 실행이 되고 있는 상태입니다. 더이상 좋은 방법이 생각이 나지 않아서 해당 방법으로 진행하려고 합니다. 혹시 event가 여러번 발생하는 것이 rendering이 여러번되는 것보다 좋은 것인가요? 여기서 이벤트리스너를 50을 기준으로 state변경에만 사용하고 다른 경우에 event를 발생하지 않게 하는 좋은 방법이 있을까요?

추천 2

11월 23일 • 조회 132

#react

1

답변

Q. React Query 데이터 재조회 방식

안녕하세요. 이번 프로젝트에서 React Query를 처음 써보게 되었는데요. 데이터를 조회해올 때, 페이지와 검색어가 바뀔 때마다 API Call을 하는 것이 목적입니다. 제가 아는 방식은 아래와 같이 2가지인데, 두 방식이 어떤 차이가 있고, 어떤 선택이 좋은 선택인지 분간이 잘 되지 않아서 질문드립니다. (폰으로 작성중이라 코드가 좀 가물가물해서 문법이 약간 틀렸을 수도 있습니다!) ---------------------------------------- 1. useQuery만 사용 useQuery(['someList', page, keyword], () => { const params = { page, keyword, }; fetchList(params); }, { onSuccess: () => { // do something } }); 2. useQuery, useMutation, useEffect 사용 useQuery('someList', () => { const params = { page, keyword, }; fetchList(params); }, { onSuccess: () => { // do something } }); const { mutate } = useMutation(fetchList, { onSuccess: () => { queryClient.invalidateQueries('someList'); } }); useEffect(() => { const params = { page, keyword, }; mutate(params); }, [page, keyword]); ---------------------------------------- 사실 제가 아는 useMutation의 용도(생성, 수정, 삭제)와 코드 사이즈 측면을 생각해서 실제론 1번 방식을 사용하고 있기는 한데, 동작상 두 방식의 정확한 차이를 모르겠어서 이렇게 질문드립니다. 혹시 두 방식 모두 일반적이지 않다면, 일반적인 방식도 함께 알려주시면 정말 감사드리겠습니다!

추천 2

11월 23일 • 조회 127

1

답변

Q. 리액트 네이티브에서 Textarea를 사용하고 싶은데 방법이 있을까요?

안녕하세요! 리액트 네이티브 공식문서 튜토리얼을 따라서 개발하고 있는 뉴비 개발자입니다. 반갑습니다. 공식문서를 응용해서 투두리스트를 만들어 보려고 하는데 html Textarea 태그처럼 여러줄로 글을 쓰고싶습니다. 어떤 태그를 사용해야 할까요..? 감사합니다

11월 23일 • 조회 77

#react

#react-native

2

답변

Q. Router.push vs next/link 어떤 케이스에서 나누시나요?

안녕하세요! 처음 질문 올려봅니다. next.js에서 router.push와 next/link로 페이지를 이동할 수 있는데 차이가 있을까요? 페이지는 이동하지만 새로고침하고 싶지 않을 때 주로 사용하는데, 둘 다 사용해보니 같은 동작을 하는 것 같아서요. 제가 생각한게 맞을까요?

추천 3

11월 22일 • 조회 135

#react

#next.js

1

답변

Q. useEffect 관리하는 방법?

안녕하세요. react를 접한지 얼마 안 된 신입 개발자인데요. 기존 코드를 보고있는데 한 컴포넌트에 useEffect가 10 몇개씩 사용되고있는데, 이런식으로 사용하는게 맞는지 궁금합니다. 선언된 state를 보다가 state의 setter를 따라서 useEffect를 들어가다보면 어느샌가 코드 파일을 위 아래로 스크롤만 하고있고 코드가 뭐하는지 이해하기가 좀 어렵더라구요. 혹시 이렇게 비대한 컴포넌트를 이해하기 쉽게 effect를 관리하는 방법이 있나요? 또는 참고자료가 있다면 알려주세요. 감사합니다!

추천 3

11월 21일 • 조회 494

#react

#useeffect

2

답변

Q. 리액트 네이티브 디버깅 다들 어떻게 하시나요?

안녕하세요, react-native로 프로젝트를 시작한 새싹 개발자입니다! 버그가 났을 때 데이터 확인을 위해 콘솔을 찍어보면서 디버깅하고 싶습니다. 인앱에서 디버깅할 수 있고 또 디버깅할 수 있는 툴도있다고 하는데 여러분들은 주로 어떤툴을 쓰시나요? 추천해주시면 감사하겠습니다.

추천 3

11월 21일 • 조회 102

#react

1

답변

Q. [React vs Next.js 장점과 단점] React와 Next.js중 프로젝트 메인 스택을 선택하는 기준이 무엇일까요?

안녕하세요, 회사에서 새로운 프로젝트를 만드려고 합니다. 지금 사용하고 있는 서비스를 관리하는 어드민 프로젝트이고 서비스는 Next.js로 만들어져 있습니다. 같이 협업하는 동료는 React에 익숙하지만 Next.js에 익숙하지 않아서 새로운 프로젝트를 Next.js로 시작할지 React로 시작할지 고민입니다. 둘중 고를때 어떤 기준으로 프로젝트를 시작하면 좋을까요? React와 Next.js 장점과 단점 간단히 알려주시면 프로젝트 선택에 큰 도움이 될 것 같습니다. 감사합니다.

추천 10

11월 21일 • 조회 250

1

답변

Q. State 변경 전 effect 실행하기

Functional component에서, 어떤 state가 변경되기 전에 effect를 실행할 수 있는 hook이 있는지 궁금합니다. useEffect / useLayoutEffect 등은 state가 변경된 뒤에 실행됩니다. Class component의 componentWillUpdate같은 라이프 사이클을 functional component에서 사용할 수 있는 방법이 있을까요?

추천 2

11월 21일 • 조회 98

#react

#hooks

2

답변

Q. 리액트에서 이미지를 업로드하고 싶습니다

안녕하세요 리액트를 공부중인 학생입니다! 리액트를 이용해 가보고 싶은 맛집을 리스트에 업로드 하는 페이지를 제작중입니다!! 다름이 아니라 가게이름, 음식의 종류, 간단한 메모는 업로드하고 리스트에서 불러오기가 가능한데 이미지 파일에 대한 궁금증이 생겼습니다. 만약 const [file, setFile] = useState()로 선언한 후 <input type='file' onChange ={()=>setFile(e.target.files)}를 하고 버튼을 추가하여 리스트에 추가하려고 하면 프론트엔드에서는 리스트에 사진은 구현이 안되나요? 백엔드를 이용해야 할까요? 미리 PUBLIC파일에 저장한 이미지들은 process.env.PUBLIC_URL을 통해 불러올 수 있는데 새롭게 업로드한 글은 PUBLIC 폴더에 사진 저장이 안되서 어떻게 구현해야 할 지 의문입니다!

추천 4

11월 17일 • 조회 242

#react

1

답변