inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

5.4) Props로 데이터 전달하기

5.4 버튼 새로정렬됨

124

kjm010629

작성한 질문수 6

0

image.png

위에 그림이 제가한 코드를 돌렸을떄 나오는 그림인데 강의 실습에서는 버튼이 새로로 정렬되지않고 위에 붙어있는 형식

image.png

이런 형식으로 나왔는데 코드에 차이점이 아예 없어 뭐가 문제인지 궁금합니다

image.png

 

javascript react node.js

답변 2

0

이정환 Winterlood

안녕하세요 이정환입니다.

음.. 아마 html이나 body 태그의 display 속성 또는 정렬 옵션의 차이로 인해 이런 결과가 나온것 같아 보입니다. 물론 자세한건 전체 코드를 다 확인 해 봐야겠지만요 ㅠㅠ 혹시 리액트 앱을 초기화 하시는 과정에서 글로벌 CSS를 완벽히 초기화 해 주셨을까요?

정 궁금하신게 아니라면 우선 해당 내용은 크게 중요한 내용이 아니기 때문에 그대로 이어서 실습 진행하셔도 됩니다. 만약 이유를 알고 싶으시다면 전체 프로젝트의 코드를 깃헙 등을 통해 링크로 전달해주시면 살펴보겠습니다.

 

0

kjm010629

https://github.com/axie01/React-Study 이거 입니다!!

너무 답답했어서 확인해주시면 너무 감사하겠습니다!

0

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.
현재 질문 내용을 기반으로 강의 진행 방식과 다른 결과가 발생한 이유를 알아보려면 조금 더 자세한 디버깅 정보가 필요합니다. 우선 전달해 주신 이미지는 코드의 구조나 레이아웃에 대한 정보를 담고 있습니다만, 실제 코드 내용을 직접 보지 않고는 정확한 원인을 파악하기가 어려울 수 있습니다.

다음과 같은 사항을 확인해 보세요:

  1. CSS 관련 문제:

    • 버튼의 정렬이 원하는 대로 되지 않는 것은 CSS 문제일 가능성이 큽니다. 스타일이 강의 코드와 일치하는지 확인하고, 스타일이 제대로 적용되는지 개발자 도구(F12)를 통해 확인해 보세요.
  2. CSS 파일 로드 여부:

    • 특정 CSS 파일이 누락되었거나 잘못된 경로로 지정되어 있지 않은지 확인해 보세요. CSS 파일을 제대로 임포트했는지도 체크해야 합니다.
  3. HTML/CSS 속성:

    • HTML 요소들에 적용된 속성이 제대로 설정되어 있는지, 특히 flex 관련 속성(flex-direction, align-items, justify-content 등)을 확인해 보세요. 코드의 조그마한 차이도 레이아웃에 큰 영향을 미칠 수 있습니다.

더 도움이 필요하시다면, 현재 완료된 코드의 연관 문제들이 해결된 유사한 질문 URL을 아래에 공유드립니다:

이 링크들은 React에서 예상치 못한 UI/레이아웃 문제를 다루며, 해결 방법에 대한 힌트를 줄 수 있습니다. 더 구체적인 내용을 알기 위해서는 유사한 코드와의 비교 및 제공받은 코드의 디버깅이 필요할 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

useEffect와 lifecycle문의

0

26

2

프론트엔드 학습 수준 문의

0

37

2

리액트 챕터별 코드에서 eslint 설정파일이 없어요

0

48

2

데이터 로딩중 화면만 계속 나와요!!

0

54

2

퍼블리셔일경우 어느정도 수준까지 강의를 들어야할까요

0

79

2

이후의 커리큘럼 문의

0

102

2

실슬환경 설정에서 save후 console.log 부분이 새로고침이 안되는현상입니다.

0

50

2

최적화 관련 질문있습니다 (useMemo 등)

0

84

3

프로바이더 컴포넌트의 위치는 어떤 기준인가요?

1

82

3

Date 객체에 관련하여 질문드립니다.

0

85

2

리액트 개정판 교재 질문

0

60

2

예제코드가 안나와요!

0

78

2

select a variant 선택에서 javascript와 javascript+react compiler 중 무엇을 선택해야하나요? com

0

108

2

onMouseEnter 관련 문의 드립니다

0

92

3

배열의 렌더링 관련 질문 드립니다.

0

73

2

2:40초 refObj를 콘솔로 출력시 오류가 발생합니다.

0

112

2

TS, 리액트 강의중에 뭘 먼저 수강하는게 좋을까요?

0

135

2

useCallback 적용한 onCreate, onUpdate, onDelete 함수..

0

69

1

vs code 자동완성관련 문의

0

112

2

91강 useEffect내에서 상태변화함수 호출시 발생하는 에러

1

178

2

87강 필터 함수 질문

0

68

2

useRef, useState count 비교

0

67

2

안된다고했던 이유가 무엇이었는지 모르겠습니다

0

90

2

85강에서 객체를 왜 클래스로 만들어서 new 하지 않는건지 궁금합니다.

0

75

2