쭈링이.log 쭈링이.log

Styled Components React styled components 란 js파일에서 css를 사용할 수 있도록 도와주는 Css-in-js 라이브러리이다. styled components를 사용하기 위해 우선 설치를 해야한다. npm install styled-components 터미널을 연 후 npm install styled-components 명령어를 입력하여 설치한다. 설치가 완료되면 이러한 로그창이 나타난다. styled components 를 사용하기위해선 라이브러리를 불러와야한다. import styled from 'styled-components'; import로 라이브러리를 불러 온후 변수를 만들어 styled components 문법을 사용하면된다. // 태그로 사용할 변수명을 만..

React props React props 를 사용하여 하위컴포넌트의 html 을 동적으로 변경가능 하도록 할 수 있다. /* eslint-disable */ import logo from './logo.svg'; import './App.css'; import { useState } from 'react'; function App() { let postId = 'postId'; let [title, setTitle] = useState(['Title1', 'Title2', 'Title3']); let [blogTItle, setBlogTitle] = useState('ReactBlog'); let [like, changeLike] = useState([0, 0, 0]); let [modal, setMo..

React props React props 란 properties의 약자로 상위(부모) 컴포넌트가 하위(자식) 컴포넌트에게 값을 전달할때 사용하는 속성이다. props는 상위 컴포넌트가 props를 사용하여 값을 수정할 수 있지만 자식 컴포넌트에서는 값을 읽기만 가능하기때문에 props는 단방향 데이터 흐름을 갖는다. prop의 선언방법은 이러하다. // 상위(부모) 컴포넌트 // 하위(자식) 컴포넌트 function 자식컴포넌트(props) { return ( props.상위컴포넌트에서 작명한 이름 ); } // App.js /* eslint-disable */ import logo from './logo.svg'; import './App.css'; import { useState } from 're..