분류 전체보기227 (React) 리액트 props, 컴포넌트에게 값 전달하기 (React) 리액트 props, 컴포넌트에게 값 전달하기 *이 포스팅은 "리액트를 다루는 기술"을 복습하는겸 정리한 포스팅입니다. 현재 리액트가 업데이트 됐거나 수정된 사항, 삭제된 사항이 있다면 꼭 말씀주시면 감사하겠습니다 :) 1. App에서 Props값 지정 *App컴포넌트에서 값을 지정하는 경우입니다. App.js import React from "react"; import Component from "./Component"; const App = () => { return ; }; export default App; Component.js import React from "react"; const Component = (props) => { return 안녕하세요, 제 이름은 {props.na.. 2021. 8. 18. (React)리액트 : 함수형 컴포넌트 VS 클래스형 컴포넌트 (React)리액트 : 함수형 컴포넌트와 클래스형 컴포넌트에 대해서 *이 포스팅은 "리액트를 다루는 기술"을 복습하는겸 정리한 포스팅입니다. 현재 리액트가 업데이트 됐거나 수정된 사항, 삭제된 사항이 있다면 꼭 말씀주시면 감사하겠습니다 :) 함수형 컴포넌스 VS 클래스형 컴포넌스 함수형 컴포넌트 클래스형 컴포넌트 state X O 라이프사이클 X O Hook O X 장점 1. 클래스형 컴포넌트보다 선언하기 편함 2. 메모리 자원이 클래스형 컴포넌트보다 덜 사용함. 3. 파일크기가 클래스형보다 더 작음 ... 간편한 코드 생성 단축키 에디터에서 rsc 입력 후, Tab누르기 에디터에서 rcc 입력 후, Tab누르기 코드 형식 import React from 'react'; const TodosContain.. 2021. 8. 18. (VsCode)Visual Studio Code 저장할 때 자동 코드정렬/자동 코드정렬 prettierrc 사용하기 Visual Studio Code 자동 코드 정렬 포스팅 요약 1. 저장 시 자동 코드 정렬 설정법 2. prettierrc 사용하여 원하는 형식으로 코드 정렬 Vscode 열은 후 > code > Preferences > Settings 검색창에 format on save 입력 > Format On Save의 체크박스 체크 이렇게 설정하면 저장할때마다 코드가 자동으로 정렬됩니다. Prettier 다운로드 프로젝트 폴더에 .prettierrc폴더 생성 .prettierrc 사용전 코드 .prettierrc 적용 * 아래 옵션말고도 많은 옵션들이 있습니다. 아래 링크를 참고해 주세요. https://velog.io/@kyusung/eslint-prettier-config { "singleQuote": tr.. 2021. 8. 17. (React) 리액트 인라인 스타일/ React Inline style (React) 리액트 인라인 스타일/ React Inline style DOM요소에 스타일을 적용하는 것을 인라인 스타일이라고 한다. 또한 인라인 스타일에는 카멜 표기법(camelCase)을 사용해야 된다. *카멜 표기법이란 문자 안에서 '-' 기호를 없애고, '-'바로 뒷문자를 대문자로 바꿔주는 것이다. ex) font-size =>fontSize, background-color => backgroundColor src/App.js import React from "react"; const App = () => { const blog = "코드짜는 문과녀"; const style = { background: "pink", color: "gray", fontSize: "48px", fontWeight: .. 2021. 8. 17. (React) 리액트 조건부 렌더링/삼항연산자, AND연산자, OR연산자 (React) 리액트 조건부 렌더링/삼항연산자, AND연산자, OR연산자 1. 삼항연산자 ex) 1 === 1 ? "true일때 들어올 값" : "false일때 들어올 값"; 아래 코드에서 blog ==="코짜문" 이 식은 true이므로 코드짜는 문과녀 입니다.를 화면에 출력하게 됩니다. *아래는 함수형 컴포넌트 입니다. src/App.js import React from "react"; function App() { const blog = "코짜문"; return ( {blog === "코짜문" ? 코드짜는 문과녀 입니다. : 없음} ); } export default App; 하지만 아래와 같이 blog === "아무값" 은 false이므로 없음이 화면에 출력됩니다. src/App.js import .. 2021. 8. 17. scss에서 미디어 쿼리 다루기/ scss 미디어 쿼리 깔끔하게 사용하기 scss에서 미디어 쿼리 다루기 scss 에서 미디어 쿼리는 아래와 같이 사용합니다. @media (max-width: 767px){ /* 브라우저 사이즈 767px 이하일때*/ } @media (min-width: 768px) and (max-width: 1023px){ /* 브라우저 사이즈 768px이상, 1023px이하 일때,*/ } 하지만 코드가 길 경우 위와 같이 사용하면, 코드가 더 길어지고, 보기에 깔끔하지 않습니다. 그래서 아래와 같이 mixin을 사용하여 코드를 정리해봅시다. /*반응형 mixin으로 깔끔하게 사용하기*/ @mixin mobile{ @media (max-width: 767px){ @content; } } @mixin tablet{ @media (min-width: 768p.. 2021. 8. 15. 이전 1 ··· 11 12 13 14 15 16 17 ··· 38 다음
