인프런 커뮤니티 질문&답변
작성한 질문수
소스파일 코드 미스
작성
·
153
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> 로 수정하니 동작 되었습니다.
답변 4
2
아 지금 Continents를 정의해 놓은 것을 보면
이렇게 해놓았잔아요
그리고 State 쪽에 보면
Continent를 위한 InitialState을
key를 이용해서 잡아두었습니다 ~
그러기에 value={item.key} 여기에서 value를 value로 넣은게 아닌 key를 이용해서
잡아두었습니다.
만약 InitialState을 value로 useState("Africa")이런식으로 했다면
item.value 이런식으로 하고 다른쪽에서 continent종류를 가져올때 value를 통해서
분별해서 가져올수 있을거 같습니다.
아 그 4개랑 3개로 가져오는 부분은 소스 문제라기 보다는 Ant Design을 이용해서 지금 스타일링을 하고있는데 아마 반응형을 만드는 소스 부분에서 Ant Design에서 부분적으로 문제가 있는게 아닌가 생각이 듭니다 ^^;;;
1
고맙습니다.
그런데 <option key={item.key} value={item.key}> {item.value}</option> 코드에서 value={item.value} 인것 같아서 했더니 파일 저장이 안되더군요. 왜그런지 value={item.key} 부분이 이해가 안되고요.
그리고 동작에서 랜딩페이지로 브라우저로 그림이 표시되는데 4개씩 보여질때는 정상적으로 보이는데... 3개씩 이거나 4개로 확장할때 첫줄은 정상적으로 표시되지만 아랫줄은 3칸이 비고 마지막에 한개의 그림이 표시 되고 더확장하면 정상적으로 됩니다. 추가로 업로드 해도 비슷한 경우가 나타납니다. 반응속도 탓 인가요.? 코드에서는 문제가 없는 것 같은데 이해가 안되네요. 감사합니다.
1
안녕하세요 skywalk 님 !!! 아 소스 코드가 잘못 되어있어서 괜한 시간 엄청 쓰셨네요 ㅠㅠ
죄송합니다 ㅠㅠ !!!
그리고 알려주셔서 감사합니다 바로 수정하겠습니다 ~ !!!!
0
초보라서 state와 연관 된것을 인지하지 못했군요. 감사합니다. 반응형은 있는지 몰라도 sm={ } 을 추가로 넣을까 생각도 해보았습니다.
고맙습니다. 강의 잘 보고 있습니다. 좋은 강좌 계속 부탁드립니다.