모르면 배우면 된다

CSS 스터디 정리! 참고 : https://github.com/techhtml/css-study-2022/tree/main/1st 1. CSS란 Cascading Style Sheet sheet : 데이터가 나열된 곳.IBSheet도 sheet라고 씀!style sheet : style이 나열된 공간. CSS는 조건이 맞으면, 이걸 보여줘. 정도는 가능하지만 논리적 결과물을 만들어낼 수 있지는 않다. cascading : 폭포. 위에서 아래로 내려오는 형상을 말함. CSS grid layout : 모듈 단위로 관리됨  2. selector - CSS는 스타일의 나열. - 스타일을 어디에 적용할지 판단하는 것이 selector다. p {} : 전체 태그에 스타일 적용.그러나 위 같은 selector는 ..

1. useEffect1) 언제 사용하는가특정 값이 변할 때마다 실행하고 싶은 이벤트가 있을 때. 2) 선언법useEffect(()=>{ //state가 업데이트될 때마다 실행하고 싶은 명령어 console.log(state); //return은 option. //컴포넌트가 화면에서 사라질(언마운트될) 때 혹은 업데이트되기 전 실행되는 함수를 return한다. //이를 cleanup 함수라고 한다. return ()=>{ console.log(state); } },[state]) 3) useEffect는 언제 실행되는가? useEffect 를 통해 렌더링 이후에 리액트가 실행해야 하는 함수를 지정할 수 있다. 이 함수를 eff..

동적으로 컴포넌트 만들기JSX 내에서 {} 중괄호 열고 JS코드로 작업한다배열로 받아올 경우, JS의 map을 활용해, 각 원소를 컴포넌트로 대체해서 반환한다.{props.item.map((expense) => ( //비용 배열 원소에 따라 동적으로 컴포넌트 생성 ))}단, 이렇게 사용했을 때Each child in a list should have a unque ‘key’ prop. 이라는 경고 메시지가 뜸key == id 유니크한 id를 설정해주는 prop커스텀 컴포넌트, html 엘리먼트 모두 가능하다.위처럼 map으로 컴포넌트를 동적으로 만들었을 때의 문제점. 새로 컴포넌트가 추가됐을 때, 리액트는 이미 만들어진 div까지 모두 렌더링하고, 그후 새로 추가된 div를..

리액트 state 이해하기리액트는 어떤 흐름으로 실행되나? state 이해하기컴포넌트는 JSX에 return되는 함수다.초기 렌더링 시 리액트는 JSX의 컴포넌트를 계속해서 훑어 내려가는데, 더이상 불러올 컴포넌트가 없을 때까지 진행한다. 불러오기가 끝나면, JSX를 DOM 명령어로 번역해 화면에 렌더링한다.가장 처음 시작되는 곳은 index.js로, ReactDOM.render(, document.getElementById(’root’)); 함수 실행이 첫 번째다. App → ExpenseItem → expenses... 컴포넌트를 타고 타고 타고 내려감. (확인 필요)리액트는 초기 렌더링 시 이 모든 것을 실행한다. 이후 전체적인 렌더링은 진행하지 않는다. 즉, html이 어떻게 바뀌어도 화면은 변하..

리액트는 왜 쓰나요?재사용, 우려사항을 분리하기 위해. 코드를 작고 관리할 수 있는 규모.커다란 html, js파일을 가지고 있을 수 있음. 각 컴포넌트가 하나의 사항에 대해서만 집중할 수 있게 된다. ㅗ드를 여러 개의 파일로 나누면 단위별로 코드를 관리하기 쉽다. 하나의 함수는 하나의 역할을 하는, 고런ㄴ 느낌.컴포넌트는 어떻게 만드나?유저 인터페이스는 html, css js가 결함한 거다. 리액트로 자겁하고 컴포넌트를 만들 때도 똑같음. 이 셋을 같은 컴포넌트로 묶고 사용자 인터페이스를 만듦. 리액트 컴포넌트에서 가장 중요한건 html, js다.리액트는 컴포넌트로 만든다. 컴포넌트는 js, html, css로 만든다. 리액트는 선언 접근 방식이다. 나만의 고유한 html 엘리먼트를 만들 수 있다.cr..