계산기 클론코딩(2) - 결과창 만들기

1. 코드 리뷰

(1) styled component 이용하여 태그들 가독성 높이기 

a. styled component 깔기

npm install styled-components

b. styled component 이용하여 꾸미기 

styled Component 이용하면 가독성이 좋아진다. 그 이유는 다음과 같다. 

인라인 스타일로 꾸밀 경우,  style 속성들을 이용해 꾸미는 내용을 적어줘야 했다. 이는 꾸미는 내용이 많아질수록 가독성이 떨어진다. 

StyleSheet를 이용하는  경우에는 태그들과 CSS 객체들을 연결해줘야 하는데, 이게 CSS 객체의 양이 많아질수록 헷갈릴 가능성이 높다.

이런식으로 연결이 많아지면 헷갈리기 십상

스타일드 컴포넌트는 말 그대로 컴포넌트의 내용에 CSS를 첨가할 수 있는 것이다. 

컴포넌트는 이름을 마음대로 할 수 있으므로, 적용한 CSS 내용에 맞게 혹은 용도에 맞게 컴포넌트 이름도 이용하면 가독성이 훨씬 좋아진다. 

 

자세한 내용은 밑에 첨부하겠다.

컴포넌트 스타일링 :: 정신과 시간의 방 (tistory.com)

컴포넌트 스타일링

우리는 다음과 같이 사용한다.

InputContianer의 경우 배경색을 COLOR라는 객체의 멤버 Result로 부터 가져온다. Styled.View는 ``으로 감싸져 있어서 내용물들은 다 String 이다. 따라서 String 안에 어떤 값을 불러와서 쓰고 싶을 때는 ${} 을 사용한다. 이는 Java나 C++ 의 %s 나 %n 과 같은 녀석이다.

 

 

이제 버튼 들을 한데 묶는 부모 View는 ButtonContainer로 대체하고, 

InPut을 받는 View도 InputContainer로 대체한다. 

 

(2) useState 이용하여 결과창 표시 

useState는 Calculatlate.js에서만 씀으로 app.js에서 선언했던 녀석을 잘라서 Calculate.js의 default 함수안에 붙여 넣는다. 

아직 값에 대한 변화 기능은 안 만들었음으로, 값만 뜨게 만든다. 

(3) 잡다지식

justify-content는 
flex 기준 주축(direction 먹인 방향)에서 값을 
어떻게 정렬할 것인지를 정의 

align-items 는 
flex 기준 교차축(direction 안 먹인 방향)에서 값을 
어떻게 정렬할 것인지를 정의

2. 스스로 해보기

<틀린 부분>

styled-component로 
버튼 컨테이너 ,인풋 컨테이너 만들어서 
버튼 별로 그안에 넣기 
해당 컴포넌트 이용해 꾸미기 

--> 틀린 점:  justify-content는 부모의 flex-direction이 column이므로 위아래의 간격에 대한 것, align-items가 가로 간격에 관한 것이 된다. 
    text-align : right는 텍스트 칸 안에서 input의 위치이고 align-items는 박스 자체의 위치이다.
                width: 100%를 주니까 결과창이 줄어듦 이거 물어보고 답변 받기