리액트에서 부모태그로 감싸야한다? --> 최상위-하위사이 태그들 특히 html 태그들이 ex)input,br 등이 닫기가 안되있어서
나타나는 문제다.
파일명 자동생성으로 ex) Home인데 home 으로 되있다든지 조심하자
- 리액트에서 function 에있는 함수이름과 스타일컴포넌트의 이름이 같으면 오류가난다. 다르게 만들자
- 리액트에서 react-icon 사용시 색깔을 클래스명 부여해서 바꿔줄수있음
ex)
<a
className={styles["social-link"]}
style={{ textDecoration: "none" }}
>
<AiFillInstagram></AiFillInstagram>
</a>
css>
.social-links {
display: flex;
position: relative;
color: white;
margin: 95px 0 0 0;
}
a.social-link svg {
width: 36px;
height: 30.6px;
margin-right: 15px;
color: white;
}
function Main() {
return (
<>
<Adheader></Adheader>
<Header></Header>
</>
);
}
export default Main;
이렇게 써야한다. 그냥 제대로 다 안쓰고 자동으로완성된거로 쓰고 그러면 () 갈호없어지고 하는데 그러면 화면이 안나온다. 여기서 return 옆 ( ) 부분하고 ; , <> </> 이부분 조심하자 !
위 사진과 같이해서
Uncaught Error: img is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.
관련오류가 났는데 <img> 를 하나로 밑의 코드와 같이 </img> 로하니까 해결되었다.
<i className="screenType">
<img
alt="forDX"
/>
/
</i>
- React 에서 => 를 = > 이렇게 뜨워쓰면 오류난다.