본문 바로가기

React

Styled Components / Css-in-JS Css-in-JS 란 ? [ 자바스크립트로 CSS 코드를 작성하는 방식 ] 1 ) vs code 터미널에 yarn add styled-compornents 입력 2 ) js 파일에 styled-components import 해주기 * styled.뒤에( div 부분 )은 html 요소가 오면 된다. 1 ) StBox안에 p 태그를 추가 👇 2 ) const 로 p 태그에 css 속성을 만들어준다. 3 ) 태그로 깜쌌던 부분을 로 바꿔준다. 👇 결과 ) StP에 CSS 준 부분이 제대로 반영됨. 하드코딩 했던 것들을 map 함수를 사용해서 바꿔보자. function App() { return( 빨간 박스 파란 박스 초록 박스 ); } 👇 // props : 부모 컴포넌트 -> 자식 컴포넌트 // Box .. 더보기
map / filter 함수 - map const testArr = [1, 2, 3]; testArr.map(function(item){ return item *2 // 여기서 item은 testArr에 할당 된 [1,2,3] 을 말함. }); // [2, 4, 6] 출력 map => 원래 데이터를 가공하여 출력하는 방법 - map 실습 const App = () => { const testArr = ['감자', '고구마', '오이', '가지', '옥수수']; return ( { testArr.map(function(item){ // 감자,고구마,오이,가지,옥수수 5개 다 리턴 return {item} }) } ); }; 출력결과 : - filter 조건을 만족하는 친구만 filtering을 걸어서 return을 함. testArr.. 더보기
React - state state를 쓰는 목적 = UI 를 바꾸기 위해서. React 안에서 변경되야되는 것은 반드시 state로 선언한다 ! 과일:input 에 입력한 값들이 event.target.value 에 들어온다. ( 개발자도구 콘솔에서 확인 할 수 있음) 👇 import { useState } from "react"; import "./App.css"; function App() { const [fruit, setFruit] = useState(''); return ( 과일 : {fruit} ); } export default App; 👇 더보기
React - Props props 가 잘 적용 됬는지 확인하기 위해서 console.log 를 찍어주고 브라우저에가서 개발자도구 열어보기 ! console 창을 보면 Object에 motherName : " 홍부인 " 이 제대로 들어와있는 것을 확인할수있다. 👇 props 를 통해 부모 -> 자식 데이터 가 전달됬다. 실습 : GrandFather 컴포넌트에서 Child 컴포넌트로 데이터 주기 1 ) 할아버지 이름을 Mother 컴포넌트로 전달 2 ) Mother 컴포넌트에서 다시 Child 컴포넌트로 전달 3 ) 나는 누구누구 의 손자에요 가 최종으로 출력 되도록. 브라우저 출력결과 Prop drilling [부모] → [자식] 컴포넌트간 데이터 전달이 이루어지는 방법이 props [부모] → [자식] → [그 자식] → [.. 더보기
React JSX ( JavaScript + XML ) 연습 삼항연산자 써보기 1) number 에 1 이라는 값을 할당해주고 2) 삼항연산자 조건을 써서 number 라는 값이 10 보다 크면 첫번째 조건인 ' ( number ) 은 10 보다 크다 ' 를 출력하고 number 가 10 보다 작을시 ' ( number ) 은 10 보다 작다 ' 를 출력 . 3 ) number 에 할당 되있는 값은 1 이므로 , 두번째 조건에 해당되서 출력시켜보면 1 은 10 보다 작다. 라는 문장이 출력 된다. React 에서 class 를 쓸때 * React에서 class를 쓸때는 className 로 써줘야함. * 문장에 색깔 주기 import React from 'react' export default function App() { const number = 1; cons.. 더보기
React - 보모,자식 컴포넌트 import React from 'react'; // 자식 컴포넌트 function Child() { return 나는 자식입니다.; } // 부모 컴포넌트 function App() { return( ) } export default App; 실습 : 3개의 컴포넌트를 만들고 할아버지,엄마,자식 컴포넌트를 만들어보고 서로 연결시켜라 import React from 'react'; function Child() { return 나는 아들이에요. // Child 를 출력 } function Mother (){ // Mother 안에 Child 를 품고 return ; } function GrandFather() { // GrandFather 안에 Mother 를 품고 return ; } function A.. 더보기

티스토리툴바