React8 [React] Styled-Component 조건부 스타일링 적용하기 커뮤니티 사이트에서 게시글을 검색했을 때, 해당하는 게시글이 없으면빈 화면 대신 게시글이 없음을 알리는 컴포넌트를 렌더링 하는 방식으로 UI를 수정했는데 이런 식으로 컴포넌트가 너무 붙어있는 느낌이라 margin-top 값을 주려고 했다.(캡쳐본으로 보면 적당해 보이지만 실제 화면상으로는 너무 여백이 없는 느낌) 근데 생각해보니 컴포넌트 margin-top 값을 수정하면 다른 경우에 해당 컴포넌트를 사용할 때 margin-top 값이 너무 크게 느껴질 수도 있을 것 같아서우측에 보이는 최신순 정렬 탭에 조건부 스타일링을 적용한 다음 데이터가 있으면 margin-bottom 값을 원래대로 적용하고, 데이터가 없으면 margin-bottom 값을 늘리도록 하는게 좋겠다고 생각했다 스타일 컴포넌트로 조건부 .. 2024. 5. 11. React에 구글 폰트 적용하기 1. 구글 폰트 사이트에 들어간다. Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 2. 원하는 폰트를 선택한 다음, Styles 부분에 있는 + 버튼을 클릭한다. 3. 상단 제일 오른쪽에 있는 View Selected Families 아이콘을 클릭한다. 4. @import 를 선택하여 필요한 것들을 복사한다.(노란색 밑줄 친 부분) 5. React 프로젝트의 src 폴더 안에 있는 index.css 에서 복사한 것들을 적용해준다. (내가 찾아봤을 때는 App.css 에 적용하라고 했지만 그것이 로컬에는 적용되지 않아서 index.css에 적용했다.) 6. index.js .. 2022. 8. 30. Props 의 특징 Props 의 중요한 특징은 Read-Only, 읽기 전용 이라는 것이다. 읽기 전용이라는 말은 값을 변경 할 수 없다는 것이다. Props 의 값은 리액트 컴포넌트가 element 를 생성하기 위해서 사용하는 값이다. 그런데 이 값들이 element 를 생성하는 도중에 바뀌어 버리면 제대로 된 element 가 생성될 수 없을 것이다. 만약 다른 Props 값으로 element 를 생성하려면 어떻게 해야할까? 이럴 때는 새로운 값을 컴포넌트에 전달하여 새로 element 를 생성하면 된다. (이 과정에서 element 가 새로 렌더링) 여기서 잠시 자바스크립트 함수의 속성에 대해 짚고 넘어가자 function sum(a, b) { return a + b; } 이 sum() 이라는 함수는 a 와 b 라는.. 2022. 7. 14. Components 와 Props 의 정의 리액트에서는 모든 페이지가 컴포넌트로 구성되어 있고, 하나의 컴포넌트는 또 다른 여러 개의 컴포넌트 조합으로 구성될 수 있다. 이렇게 하나의 컴포넌트를 반복적으로 사용하기 때문에 전체 코드의 양을 줄일 수 있다는 장점이 있다. 리액트 컴포넌트는 개념적으로 자바스크립트의 함수와 비슷하다. 함수가 입력을 받아 출력을 하는 것 처럼, 리액트 컴포넌트도 입력을 받아 정해진 것을 출력한다. 그렇기 때문에 리액트 컴포넌트를 함수라고 생각하면 좀더 쉽게 개념을 이해할 수 있을 것이다. 하지만 리액트 컴포넌트의 입력과 출력은 일반적인 자바스크립트 함수와는 조금 다르다. 이 그림을 보면, 리액트 컴포넌트에서의 입력은 Props 이고 출력은 React element 가 된다. 결국 리액트 컴포넌트가 해주는 역할은, 어떠한.. 2022. 7. 13. 이전 1 2 다음
