본문 바로가기

728x90

reactjs

(7)
3-5. Styled-components에 Props 활용하기 Styled-components에 Props 활용하기 styled-components를 이용해 css를 지정하고자 할때 props를 활용해야 할 때가 있다! styled-componets로 작성된 컴포넌트들로 구성된 아래와 같은 컴포넌트가 있다 export default() => ( Item1 Item2 Item3 Item4 ); 만약 Item 들에 각각 다른 background-color를 적용하고 싶다면? 어떻게 해야할까!!? 적용하고 싶은 background-color 를 Item에 props로 전달, styled-components로 선언한 Item에서 이 props를 받아주면 된다! const Item = styled.li` (...생략) border-color: ${props => props...
3-3. CSS in React Reactjs에서 CSS를 활용하는 3가지 방법 - 3. styled-components styled-components 는 JS 와 CSS가 분리된 것을 보완하는 가장 널리 쓰이는 방법! 별도 설치가 필요하다 yarn add styled-components npm install styled-components 설치 완료~! styled-components를 사용할 컴포넌트 내에서 import 해 사용한다 import styled from "styld-components"; 이전 포스팅과 동일하게 Header의 ul태그에 스타일을 주고 싶다면! const List = styled.ul` display: flex; &:hover { background-color: blue; } `; 위와 같이 사용할 수 ..
3-2. CSS in React Reactjs에서 CSS를 활용하는 3가지 방법 - 2. css 모듈 이용하기 css module을 이용하면 className 을 임의화하여 css가 global이 아닌 local이 되도록 함! 1. css 파일을 module.css로 바꿔주기 (CRA를 통해 만든 프로젝트이기때문에 가능) 2. css 파일에 className 넣어주기 /* Header.module.css */ .navList { display: flex; } .navList:hover { background-color: blue; } 3. import 방식을 변경해주기 like javascript (꼭 styles라고 할 필요 없음. 사용하려는 변수 넣어주면 됨) // 기존 import 'Header.css'; //변경 import s..
3-1. CSS in React Reactjs에서 CSS를 활용하는 3가지 방법 - 1. css 파일 import 하기 .css 작성법은 react 라고 해서 특별할 것이 없다. ${적용할 범위} { css 속성: 값 } 작성한 css 파일을 App.js에서 import 해준다. import '../style.css' // 각자 경로에 맞춰 class App extends Component { ... } export default App css 파일 작성법은 동일하지만 react 에서 class 를 사용하고 싶으면 className이라 써야한다. css파일을 사용할 경우 단점은 컴포넌트와 css가 분리되어 있다는 것. React 의 장점인 컴포넌트의 캡슐화, 모듈화에 반한다. 전체 어플리케이션에서 하나의 컴포넌트를 가져오면 그 안에 j..
1-4. Spread Operator (스프레드 연산자) -Spread Operator(스프레드 연산자) 스프레드 연산자는 배열, 문자열, 객체 등에서 "전개"를 위해 사용 1. 배열에서의 전개 (mdn 참고: 스프레드 문법은 1차원 배열에서 효과적으로 동작한다!) - 배열 합치기 아래 두 배열이 있다. const abcd = ["a", "b", "c", "d"]; const efgh = ["e", "f", "g", "h"]; console.log(abcd); // ["a", "b", "c", "d"] console.log(efgh); // ["e", "f", "g", "h"] 두 배열을 합치고 싶다. const arr = [abcd, efgh]; console.log(arr); arr의 출력 결과는 배열 abcd와 배열 efgh를 원소로 갖는 2차원 배열이다..
1-3. 객체 비구조화 할당(Object Destructuring) - Object Destructuring(객체 비구조화) 구조화 된 객체 내 속성을 비 구조화 해 가져다 쓰는 것 color 라는 객체가 있다. const color = { red: "#FF0000", black: "#000000", white: "#FFFFFF", blue: { vivid: "#0000FF", light: "#87CEEB" }, yellow: "#FFFF00" } 이 color의 속성인 red와 blue의 light에 접근하고자 한다면 기존의 방식에서는 const red = color.red; console.log(`red: ${red}, lightblue: ${color.blue.light}`); // red: #FF0000, lightblue: #87CEEB 위와 같이 접근하려는 속..
1-1. Arrow Function -화살표 함수 (arrow function) 기존의 function() {} 도 그대로 사용 가능함 기존 function의 사용방식을 먼저 확인하고, arrow function의 사용법을 익혀보자 1) 기존 function의 사용방식 function sayHello(name) { return "Hello " + name; } const elena = sayHello("elena"); console.log(elena); // Hello elena function 키워드와 함께 함수를 선언하고 () 안에 파라미터를 입력한다. (파라미터가 없을경우 그냥 ()만 입력) { } 안에 함수에서 실행할 내용을 선언한다. { } 내 return 키워드와 함께 return 값을 선언하지 않으면 출력 결과값은 undefi..

728x90