코드캠프 부트캠프 1일차-2
JSX란?
React의 CSS(CSS-IN-JS) - emotion
이렇게 태그에 의미를 부여할 수 있어서, 태그만 봐도 무엇을 의미하는지 예상을 할 수 있다. 또한, className을 입력하지 않아도 되기 때문에, 코드 길이기 짧아져 가독성이 좋아진다다.
CSS-IN-JS활용
다음은 직접 작성한 코드
export default function emotionPage() {
return (
<Wrapper>
<LargeBox>
<Title>게시물 등록</Title>
<User>
<Writer>
<SmallTitle>작성자</SmallTitle>
<InputContent placeholder ="이름을 적어주세요."/>
</Writer>
<Password>
<SmallTitle>비밀번호</SmallTitle>
<InputContent type="password" placeholder ="비밀번호를 적어주세요."/>
</Password>
</User>
<PostName>
<SmallTitle>제목</SmallTitle>
<InputContent placeholder = "제목을 작성해주세요."/>
</PostName>
<PostContent>
<SmallTitle>내용</SmallTitle>
<InputContent placeholder ="내용을 작성해주세요."/>
</PostContent>
<br/>
<Address>
<SmallTitle>주소</SmallTitle>
<Search>
<AdNum>12345</AdNum>
<SearchAdNum>우편번호 검색</SearchAdNum>
</Search>
<Blank></Blank><br/>
<Blank></Blank>
</Address>
<br/>
<YouTube>
<SmallTitle>유튜브</SmallTitle>
<InputContent placeholder ="제목을 작성해주세요."/>
</YouTube>
<br/>
<Picture>
<SmallTitle>사진 첨부</SmallTitle>
<PictureSetting>
<PlusImages>+<br/>Upload</PlusImages>
<PlusImages>+<br/>Upload</PlusImages>
<PlusImages>+<br/>Upload</PlusImages>
</PictureSetting>
</Picture>
<MainSetting>
<SmallTitle>메인 설정</SmallTitle>
<SelectMainSetting>
<input type ="radio" name="mainsetting"/> 유튜브
<input type ="radio" name="mainsetting"/> 사진
</SelectMainSetting>
</MainSetting>
<SignUp>등록하기</SignUp>
</LargeBox>
</Wrapper>
)
}
최대한 직관적으로 변수명을 만들고자 했지만 쉽지가 않았다. 역시 이름정하는게 가장 어려운것같다. 좀 더 센스있고 알아보기 쉬운 이름을 지을 수 있게 책이라도 읽어야하나...
Author And Source
이 문제에 관하여(코드캠프 부트캠프 1일차-2), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@junejae_1625/코드캠프-부트캠프-1일차-2저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)