김성원의 코딩 일기

theme - theme는 최상단 파일에 스타일 값을 미리 설정한 후 자식 파일 또는 컨퍼넌트에 함수로 호출하여 값을 적용 시키기 위한 기능이다. 사용한 예로는 다크모드가 있다. import로 import { ThemeProvider } from 'styled-components'; 선언할 후 자신이 원하는 변수면으로 스타일 값을 설정한다. 이때는 기존에 사용하던 css의 프로퍼티가 아니기 때문에 잘 알아보고 사용하자!! 예) const darkTheme = { textColor: "whitesmoke", backgroundColor: "#111", } 그 후 자신이 적용하고 싶은 컨퍼넌트에 부모 컨퍼넌트로 ThemeProvider를 선언한 후 theme 프롭스로 변수명을 선언한다. 예) 자식 컨퍼넌트 ..

1. 선언하기 아래의 패키지를 설치 후 사용할 수 있다. npm i styled-components 함사 밖에 선언해 컴퍼넌트 선언처럼 사용을한다. 기본적은 형태는 import styled from 'styled-components'; const 변수명 = styled.태그` css 작성 `; function App() { return ( ); } export default App; 2. css컴퍼넌트에 몇 개 요소만 변경하고 싶을 때 1. prop스로 선언하여 css에 적용하기 - JSX에 선언한 컴퍼넌트에 prop를 선언하고 원하는 css에 넣는다. 예) import styled from 'styled-components'; const Box = styled.div` width: 100px; heig..

- React css를 적용하는 방법은 제가 알고 있는 부분에서는 5가지가 있다. 1. 태그에 직접 적용하기 이것은 html안에 style을 적용하는 것이랑 동일하며 JSX문법에 속하고 태그 안에 style를 선언한 후 {{}} 중괄호 2개를 선언하여 중괄호 안에 적으면 된다. css랑 조금 다르게 객체의 형태로 반환해야 한다. 예) 테그에 적용하기 가시성도 안 좋아지고 모든 태그에 직접 다 적용해야 한다는 단점으로 잘 사용 안 하는 것으로 알고 있다. (그냥 안 씀.) 2. css파일을 import로 불러오기 이 방법은 기존의 html과 css파일을 불러와 사용하는 것이랑 비슷하다. 하지만 단점이 있는데 리액트는 싱글페이지이다. 즉, 상단의 파일에 선언이 되어 있으면 하위 파일에도 적용이 된다는 단점이..

- React는 싱글 페이지로 되어 있다. 그렇다면 페이지는 1개 밖에 없다는 것인데?!?! 어떻게 url을 바꿔가면서 페이지를 이동하는 것일까? 그것은 가상DOM을 이용해 해당 url이 되면 해당되는 가상DOM을 들고 온다. 그것을 가능하게 해주는 것이 Router이다. (사실 이제 공부하고 있어서 다른 방법은 모른다 ㅋ) 시작하기전 설치해야 하는 것이 있다. 작성 시점 제가 적용한 버전 npm i react-router-dom@5.3.0 설치한 후 import로 선언한 후 사용한다. 상세하게 보고 싶다면 공식 사이트를 참고하자!!!! 공식 사이트 링크 Router - 최상위 주머니라고 생각하면 편하다! Switch - 일치하는 단 하나의 컴포넌트만 렌더링 해준다. Route - 이동 결로를 설정해주고..

fetch() - Fetch API는 HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 JavaScript에서 접근하고 조작할 수 있는 인터페이스를 제공한다. Fetch API가 제공하는 전역 fetch() 메서드로 네트워크의 리소스를 쉽게 비동기적으로 가져올 수도 있다. fetch 명세는 jQuery.ajax()와 크게 두 가지에서 다르다. fetch()가 반환하는 프로미스 객체는 404, 500과 같은 HTTP 오류 상태를 수신해도 거부되지 않습니다. fetch()의 프로미스는 서버에서 헤더를 포함한 응답을 받는 순간 정상적으로 이행합니다. 대신, 응답의 상태가 200-299를 벗어날 경우 ok (en-US) 속성이 false로 설정됩니다. 프로미스가 거부되는 경우는 네트워크 연결이 실패하는 경..

강의를 보면서 To-Do-List를 만들며 새롭게 알게 된 것들을 기록한 페이지 입니다. event.preventDefault() - preventDefault()메서드는 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 사용자 에이전트의 기본 동작을 실행하지 않도록 지정할 때 사용한다. str.trim() trim() 메서드는 문자열 메서드이며 문자열의 양끝의 공백(공백문자와 개행문자)를 저거한 후 수정하지 않고 반환한다. JSX에서 JS 내장함수 사용하기 - {}안에 작성을 하면 사용할 수 있는데 => 이후 JS에선 {}(중괄호)를 사용하지만 JSX에서는 {}(중괄호)는 JS를 작성할 수 있게 해주는 공간이므로 ()(소괄호)를 사용해야 된다. 예) // JS와 JSX의 차이를 확인하세..

useEffect - 리 렌더링 단계 시 렌더링 되지 않게 한다.(간단. 웹에 처음 접속 할때만 호출하고 클라이언트에 의해 웹리 리렌더링 될 시 랜더링 되지 않게 한다.) 공식 문서 useEffect(didUpdate); // 상세 useEffect(함수, []); // 또는 useEffect({ 함수; }, []); 예 const [counter, setValue] = useState(0); const [keyword, setKeyword] = useState(""); const onClick = () => setValue((prev) => prev+1); const onChange = (event) => setKeyword(event.target.value); // useEffect 사용 useEff..

리엑트 세팅! 리액트는 node.js를 이용해 초기 세팅을 받아온다. node.js를 설친 한 후 bash를 이용해 받으면 된다. 위에 파일명에 원하는 이름을 넣으면 파일도 직접 만들어 준다. npx create-react-app 파일명 리엑트 가동! node,js가 설치가 되어 있으므로 로컬 환경에서 직접 가동해 볼 수 있다. 그땐느 설정에 때라 다르긴 하디만 npx start 또는 npx run start를 입력하면 된다. npm start npm run start 사용하기! 세팅을 하면 많은 파일들과 폴더들이 있는데 우리는 대부분의 작업을 src폴더 안에사 한다. 컴퍼넌트 단위로 파일을 분리해서 작업하며 import를 이용해 불러와서 붙인다. // 반환하기 위해 마직박에 붙인다. export def..

Memo - 자식 컴퍼넌트 사용 시 변경되는 부분만 리 렌더링 한다. const 이름 = React.memo(컴퍼넌트); 예) function Btn({ text, changeValue }) { console.log(text); // Save Change, Continue를 처음에 보여줌 return ( {text} ); } const MemorizedBtn = React.memo(Btn) // memo가 없을때 이벤트를 누르면 콘솔 창에 Revert Change, Continue 모두 리렌더링함. // memo가 있으면 Revert Change만 리렌더링함. function App() { const [value, setValue] = React.useState("Save Change"); const c..

component - 여러 개의 프로그램 함수들을 모아 하나의 특정한 기능을 수행할 수 있도록 구선한 작은 기능적 단위를 말한다. 컴퍼넌트를 이용하면 소프트웨어 개방을 마치 레고 블록을 쌓듯이 조립식으로 쉡게 할 수 있다. 컴퍼넌트는 프로그램의 한 부분을 의미하며 재사용이 가능한 최소 단위를 말하며 모듈이라고도 한다. 예) function MinutesToHours() { //자식 컴퍼넌트 const [amouny, setAmouny] = React.useState(0); const [flipped, setFlipped] = React.useState(false); const onChange = (event) => { setAmouny(event.target.value); }; const reset = ..