2021.02.04 React Style 적용,Styled Components 정리

2021.02.04_React Style 적용, Styled Components_정리노트

 

드디어 프로젝트가 시작됨 ㅊㅊㅊㅊ 근데 아직 쓰면서도 많이 헷갈리는 것 같다. 오늘은 그나마 스타일 컴포넌트라서 괜찮았는데.. 아마도 다음 포스팅 주제가 될 모달창 같은경우나, 이벤트 설치, props,state 쓰게 되면 대혼란이 올 것 같다...

 

쨋든 또 주절주절 그만하고

오늘은 인트로 페이지를 만들면서 주가 되는 스타일 적용 방법, 스타일 컴포넌트를 정리하고, 추가적으로 적용해놓은 부수적인 컴포넌트들을 설명해보게씀.

 

먼저 리액트에서 style 을 적용하는 여러 가지 방법부터 ㄱㄱ 

 

 

inline styling

 

 

html 태그 안에 직접 입력하는 방법. style={ } 형식으로 입력하며, 안에는 json 형식으로 속성명:'속성값' 으로 입력한다. 

속성명은 css 에서 하이픈 (-) 으로 쓴 것처럼 쓰지 않고, camelCased property names 를 사용한다.

위의 예처럼, text-align 은 textAlign 으로 !

별로 적용할 속성이 없다면, 인라인으로 나도 적용했음 !

 

javascript object

 

 

 

자바스크립트의 오브젝트 형식으로 컴포넌트 내에 변수를 선언해주고, 마찬가지로 camelCased 와 함께 json 형식으로 스타일을 작성한다. 

 

 

그러고 나서 해당 태그에 style={변수명} 과 함께 써주면 적용 완료! css 가 많을 때는 이렇게 적어두는 것이 좋겠다.

 

 

 

 

css 파일 따로 분리

 

 

 

 

한 파일안에 css 를 분리시키고 싶다면, 아예 css 파일을 따로 분리해서 import 해주는 방법도 있다. 

이렇게 따로 분리해서 import 해주고 

 

 

 

해당 css 에서 적어주는 방법도 잘 적용된다! 여기서는 기존 css 파일 적듯이 적으면 된다. 

 

 

 

코드가 너무 길어져서 css 파일을 따로 분리한다해도, 여전히 css 는 js 와 달리 여러가지 한계가 존재한다. ( js 처럼 변수를 쓸 수도 없고, 루프문, 함수 사용 불가 등의 불편함 ) 

 

이 둘을 해결하기 위해서 react 에서는 styled-components 라는 라이브러리를 제공한다. 

 

 

styled-components

css in js 기술에 쓰이는 라이브러리로, 말그대로 js 안에서 css 를 사용할 수 있는 것을 말한다. 그 중에서 가장 흔히 쓰이는 라이브러리이다.

 

쓰고 싶을 때는, 

 

먼저 

 

yarn add styled-components

 

명령어를 통해 스타일 컴포넌트를 설치해주고,

 

 

 

해당 js 파일에서 styled-components 를 불러와서 styled 를 불러오면 된다. css 모듈은 여러 줄의 css 의 코드를 조건부로 보여주고 싶을 때 불러오는 것이다. 이 모듈을 사용해야 해당 스타일 내부에서도 props 를 조회할 수 있다.

 

 

이게 무슨 말이냐, 우리는 스타일 컴포넌트를 통해 스타일과 컴포넌트 생성을 동시에 할 수도 있고, 스타일 컴포넌트에서 쓰는 Tagged Template Literal 문법 (``) 을 통해 해당 컴포넌트의 props 를 읽어올 수도 있다.

 

 

 

 

이렇게 조건문을 쓰고, props로 display 를 들고올 수 있다는 말! react 에서는 if 문 대신 삼항 연산자를 사용하는데, ? 는 true 일 때를 반환하고, : 는 false 일때를 반환한다. 말그대로 if 는 ? elif 는 : 라고 생각하면 되겠다.

 

 

이 부분은 아직 내가 공부가 더 필요하기도 하고, 내가 오늘 설명할 인트로 페이지에서는 조건을 걸지 않아서 다음에 modal 부분에서 더 자세히 공부해서 들고오게씀!

 

오늘은 컴포넌트 생성과 동시에 스타일을 지정해서 보낼 수 있다는 점에 집중해서 같이 작성 ㄱㄱㄱㄱ

 

 

 

 

이렇게 사용하면 되는데, css 모듈을 사용하지 않는다면 styled.div`` 을 통해 적어줄 수 있고, 나는 일단 이런식으로 styled.div(css``) 형식을 통해 사용해주었다. 

 

여기서 보면, 나는 div 를 스타일링을 이렇게 해줄 것이다. 라고 말해주는 것이고, css 안에 css 의 형식을 사용해서 적어주었다. 만약 button 을 생성 해주고 싶다면, styled.button 을 통해 스타일링 해주면 되는 것!

 

 

 

스타일 컴포넌트를 작성하고 써주게 return 에 써주게 되면, 초록색으로 변하면서 컴포넌트가 된다! 그 안에 직접 나처럼 html 태그를 써주는 방법도 있는데, 나는 style 의 여러 적용 방식을 공부하면서 작성해서 코드가 길어졌지만, 다른 것도 스타일 컴포넌트를 통해 써주면 , return 되는 곳의 코드는 간결하게 예뻐지겠지?? 

 

 

 

 

그러고 개발자도구를 통해서 해당 컴포넌트를 찍어보면 div 가 잘 적용 되어 있고, 밑에 스타일에서도 보면, 잘 적용된 모습을 볼 수 있다.

 

 

---

 

여기서 근데 나온 Link 개념도 잠시 정리를 하고 갑씨다.

 

Link

는 html에서 a 태그의 역할을 한다. 말그대로 링크 컴포넌트인데, 왜 a 를 사용하면 안되는가??

 

a의 기본적인 속성은 페이지를 이동시킬 때, 기본적으로 페이지를 아예 새로 불러오게 된다.

그러면 리액트 앱이 재렌더링이 되면서 지니고 있는 state 나 상태들도 초기화가 되고 이미 렌더링 된 컴포넌트도 재렌더링을 하게 된다.

우리는 리액트에서 재렌더링 되지 않고 여러가지를 바꾸게 되는데, 이는 리액트앱과 맞지 않는 속성이다. 만약 a 를 사용하게 되면, js preventdefault 를 쓰면서 a 가 가지고 있는 기본 속성을 멈추게 해야하는 추가 작업이 필요하다.

 

이렇게 복잡하게 a 태그를 사용하지 않고 바로 Link 컴포넌트를 사용하게 되면, HTML5 History API 를 사용하여, 브라우저의 주소만 바꿀뿐, 페이지를 새로 불러오지는 않는다.

 

 

 

해당 Link 컴포넌트를 사용해서 나는 내가 요청한 해당 경로의 페이지를 재렌더링 없이 보여주게 되는데,  먼저 우리가 요청을 보내면 어디로 갈 지, 그 경로부터 App.jsx 에 설정을 해주어야겠지??

 

 

 

음.. 여기서도 여러가지 개념이 많이 등장하는데, 먼저 웹 개발에서 쓰이는 react-router-dom 을 설치해준다.

 

yarn add react-router-dom

 

npm install react-router-dom

 

이렇게 yarn , npm 둘 중 자신이 쓰는 패키지 관리툴을 통해 설치해주고,

 

 

 

BrowserRouter, Route, Switch 를 불러와준다.

 

BrowserRouter

react-router-dom 에서는 <BrowserRouter>, <HashRouter> 두 가지가 있다. 

여기서 BrowserRouter 는 HTML history API 를 활용하여 UI 를 업데이트하고, 

HashRouter url 의 hash 를 활용한 것으로 정적인 static 페이지에 적합하다. 

우리는 리액트에서 동적인 페이지를 제작하므로, 보편적인 BrowserRouter를 사용해보자!

 

또한 모든 위치의 기본 url 을 나타내는 basename 을 사용해서 intro 페이지를 기본 url 로 사용했다. basename을 쓸때는 string 형태로 써야한다.

 

그 다음! 

 

Switch

만약 아무 링크에도 부합하지 않는 Not Found 페이지를 띄워주고 싶을 때, 사용하는 기능.

리액트 라우터는 만약에 아무 링크에도 부합하지 않는 not found 페이지가 있을 때는, 실제로 실행 시켜 보면, 매칭 시킬 값이 없는 path 가 나타나면 무조건적으로 렌더링을 시켜버린다.

이럴 때 쓰는 것이 switch!

 

 

Route

Link 를 통해 생성된 url 요청을 받는 태그! Link to 로 우리가 요청을 보내주게 되면, 이 아이가 받아서 해당 path 를 띄워주게 되는 것.

 

근데 이렇게 해주면, 

 

 

이렇게 우리가 요청해준대로, 잘 들어가는데, 컴포넌트 렌더링은 여전히 / 즉, intro 만 렌더링이 된다.

 

그 이유는 바로 Route 에서 적어준 속성 때문인데, switch 는 매칭되는 제일 첫번째의 Route 만 선별하는데, 첫번째로 적어준 "/" 는 모든 요청에서 포함되어 있기 때문에, 해당 인트로 컴포넌트만 렌더링이 되기 때문이다.

 

이럴 때 쓰는 속성이 exact !

exact

해당 pathname 과 정확히 일치할 때에만 해당 Route 를 매칭시킴. 따라서 "/" 에서 exact 를 적어주게 되면, 다른 "/main","/intro" 는 /을 포함하고 있더라도 매칭되지 않는다. 그리고, "/main" 을 보내게 되면, 정확히 해당 pathname 으로 된 부분만 보여주게 된다.

 

 

 

그러니, 해당 속성들을 잘 보고 사용하도록 하자... 어렵다 어려워.. 쨋든 이렇게 세팅을 해주게 되면, Link to 를 통해 요청을 보내게 되면 정확한 pathname 을 받아 해당 컴포넌트가 잘 랜더링 되게 된다. 

 

확인 ㄱㄱ

 

 

 

 

이렇게 Link 컴포넌트로 /main 으로 가주세요 요청을 받으면, 

 

 

 

해당 인트로 페이지로 가서 개발자도구를 찍어보면, DOM 에서는 a 태그로 잘 링크가 잘되어있는 것을 볼 수 있고,

 

 

여기서 정확하게 "/main" pathname 을 가진 Main 컴포넌트만 랜더링이 될 것이다.

 

 

짠 이렇게 요청과 함께, 메인 페이지 컴포넌트가 렌더링이 잘 되게 된다.

 

---

 

으어 포스팅 겁나 길어졌군... 프로젝트를 같이 협업하면서, 그냥 따라 치면서 만드는거에 치중하다보니, 막상 포스팅을 하면서 정리하다보니, 디테일 한 부분부분 까지 많이 신경써서 작업해야 한다는 점을 뼈저리게 느낀다. 

오늘의 포스팅 끝끝!