inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

소스파일 코드 미스

201

skywalk

작성한 질문수 26

0

<select onChange={continentChangeHandler}>

                    {Continents.map(item => (

                        <option key={item.key} value={Continent}> {item.value}</option>

                    ))}

 </select>

풀소스에 이렇게 되어 있어 비디오를 다시보고 

<select onChange={continentChangeHandler} value={Continent} >

                    {Continents.map(item => (

                        <option key={item.key} value={item.key}> {item.value}</option>

                    ))}

 </select> 로 수정하니 동작 되었습니다.

웹앱 react nodejs redux mongodb

답변 4

2

John Ahn

아  지금  Continents를 정의해 놓은 것을 보면 

const Continents = [
{ key: 1, value: "Africa" },
{ key: 2, value: "Europe" },
{ key: 3, value: "Asia" },
{ key: 4, value: "North America" },
{ key: 5, value: "South America" },
{ key: 6, value: "Australia" },
{ key: 7, value: "Antarctica" }
]

이렇게 해놓았잔아요 

그리고   State 쪽에 보면 

Continent를 위한 InitialState을 

const [Continent, setContinent] = useState(1)

key를 이용해서 잡아두었습니다 ~ 

그러기에 value={item.key} 여기에서  value를   value로 넣은게 아닌 key를 이용해서 

잡아두었습니다. 

만약    InitialState을   value로    useState("Africa")이런식으로 했다면 

item.value 이런식으로 하고     다른쪽에서 continent종류를 가져올때  value를 통해서

분별해서 가져올수 있을거 같습니다.

아 그 4개랑 3개로 가져오는 부분은 소스 문제라기 보다는    Ant Design을 이용해서 지금 스타일링을 하고있는데  아마 반응형을 만드는 소스 부분에서 Ant Design에서 부분적으로 문제가 있는게 아닌가 생각이 듭니다 ^^;;;

1

skywalk

고맙습니다.

그런데 <option key={item.key} value={item.key}> {item.value}</option> 코드에서 value={item.value} 인것 같아서 했더니 파일 저장이 안되더군요. 왜그런지 value={item.key} 부분이 이해가 안되고요.

그리고 동작에서 랜딩페이지로 브라우저로 그림이 표시되는데 4개씩 보여질때는 정상적으로 보이는데... 3개씩 이거나 4개로 확장할때 첫줄은 정상적으로 표시되지만 아랫줄은 3칸이 비고 마지막에 한개의 그림이 표시 되고 더확장하면 정상적으로 됩니다. 추가로 업로드 해도 비슷한 경우가 나타납니다. 반응속도 탓 인가요.? 코드에서는 문제가 없는 것 같은데 이해가 안되네요.  감사합니다.

1

John Ahn

안녕하세요 skywalk 님  !!!  아  소스 코드가 잘못 되어있어서 괜한 시간 엄청 쓰셨네요 ㅠㅠ    

죄송합니다 ㅠㅠ !!! 

그리고  알려주셔서 감사합니다  바로 수정하겠습니다 ~ !!!! 

0

skywalk

초보라서 state와 연관 된것을 인지하지 못했군요.  감사합니다. 반응형은 있는지 몰라도 sm={ } 을 추가로 넣을까 생각도 해보았습니다.

고맙습니다. 강의 잘 보고 있습니다.  좋은 강좌 계속 부탁드립니다.

강의 내용은 훌륭하나, 환경 설정 오류 때문에 진도를 나갈 수 없습니다. 20년 버전 강의.

0

60

1

강의자료는 어디서 볼 수있나요??

0

66

1

이 쇼핑몰 만들기 강의는 관리자페이지 만드는건 없나요

0

114

2

웹에서 실시간 코드반영이 안돼요

0

120

1

app.use질문

0

64

1

강사님께 어떻게 직접질문할수있어요??

0

76

1

const함수같은거 기초강의는 어디있나요

0

81

2

리덕스 참조챕터가 어딨어요? 미리듣고오라는데요

0

81

2

강의가완전 오래되서 다 틀리네 app.jsx도 tailwind css 다틀림 무책임함

0

68

1

개발자도구에 redux란이 없어요

0

88

1

npx tailwindcss init -p 에서 계속 에러나요

0

92

1

쇼핑몰기능중 찜하기 기능은 어떻게 구현하나요

0

139

2

강의하다 줌으로 설명가능한지좀 정확히 알려주세요. 이 선생님 정책이 어떻게 되는데요. 직접 연락할 메일이라도 알려주세요

0

43

1

도표 강의 자료 열람 불가능

0

109

1

tailwindcss를 vite에서 이용하는 방식이 바뀐것 같습니다.

0

1132

2

eslint 설정 후 오류가 납니다.

0

223

1

오버로드 오류

0

150

1

VSCode에서 save를 할 때, landingpage의 useEffect가 실행되는 문제에 대하여

0

169

1

dispatch(logoutUser()) 실행시 dispatch(authuser())도 함께 실행되는 문제

0

228

2

logout할 때, server로 요청을 보내서 authUser middleware를 통과하도록 하는 이유?

0

195

1

webkit-text-size-adjust 오류

0

315

1

does not provide an export named 'userReducer'

0

217

2

빌드 배포

0

140

1

삭제 예정 강의는 언제 삭제 되나요? 저것때문에 수강완료를 못하면 회사에서 비용을 청구한다고 합니다~

0

220

2