세리프 따라잡기

infcon에서 핸즈온 세션 신청해서 들었습니다~ 바벨이란: 트랜스파일러(통역사) 컴포넌트: 일관적인 ui 보여줄 수 있고 다른 사람들이 만든 컴포넌트를 쉽게 가져다 쓸 수 있다. (ex. ant design) emotion, styled-component, tail-winds '요즘 css이렇게 한다~' emotion library참고 styled-component 젤 많이 사용한다고 합니다 좀 더 공부해야 할 부분 (느낀 것) 상태 끌어올리기 +나에게 하는 memo 자세한 강의 내용들은 구글 공유 문서함에 있다!

props를 줄 수도 있고, (properties) 안 줄 수도 있는데, 안 주면서 사용하는 방법은 → ({ 해당 프로퍼티 이름 }) 이렇게 사용하는 거임..!! // es6 방법 코드로 표현하자면: // 기본 방식 (props) const Btn = (props) => { return( {props.text} ) } //------------------------------------- // shortcut 방식 ({ text }) const Btn = ({ text }) => { return ( {text} ) } const App = ()=>{ return ( ) }

- Render는 html로 입력받아 해석해서 표준 출력 장치(모니터)로 출력 해 줍니다 위 작업을 Rendering이라고 합니다 useeffect와 usestate 차이? - usestate: 함수형 컴포넌트에서도 상태(state) 관리를 할 수 있게 해 주는 Hook 입니다. - useEffect: useEffect는 컴포넌트의 상태값 변화에 따라 컴포넌트 내부에서 변경이 이루어져야 되는것들을 처리할 수 있다. ** useeffect 정확히 어떤 상황에서 사용하는지? mount update unmount 될 때의 상황을 관리하고 싶을 때 사용하는 게 useeffect useeffect가 인자를 받는 종류는 2가진데 1. callback만 받는 것과 == 컴포넌트가 맨 처음 화면에 렌더링될 때, 다시 ..

Q. box에 shadow 기능은 못 넣나? A. https://developer.mozilla.org/ko/docs/Web/CSS/box-shadow box-shadow - CSS: Cascading Style Sheets | MDN box-shadow CSS 속성은 요소의 테두리를 감싼 그림자 효과를 추가합니다. 쉼표로 구문해서 여러 그림자 효과를 입힐 수 있습니다. 박스 그림자는 요소에서의 수평수직 거리(오프셋), 흐릿함과 확산 developer.mozilla.org Q. all: unset은 뭐야? A. https://developer.mozilla.org/ko/docs/Web/CSS/all all - CSS: Cascading Style Sheets | MDN CSS all 단축 속성은 요소의 ..

https://velog.io/@jjunyjjuny/React-useState%EB%8A%94-%EC%96%B4%EB%96%BB%EA%B2%8C-%EB%8F%99%EC%9E%91%ED%95%A0%EA%B9%8C [ React ] useState는 어떻게 동작할까 useState의 동작 원리에 대해서 velog.io https://devowen.com/298 [React] 클래스형 컴포넌트 vs 함수형 컴포넌트 리액트를 사용하여 프론트 개발을 할 때 두 가지 방법으로 컴포넌트를 선언할 수가 있다. 과거에는 클래스형 컴포넌트를 주로 사용했지만, 2019년 v16.8 부터 함수형 컴포넌트에 리액트 훅(hook)을 devowen.com https://www.daleseo.com/react-hooks-use-re..

state prop을 통해 입력된 데이터를 우리가 만든 컴포넌트 함수가 처리해서 return값을 만들면, 그 return값이 새로운 ui가 된다. prop가 함께 컴포넌트 함수를 다시 실행해서 새로운 return값을 만들어주는 데이터가 있는데, 이것을 state라고 함 prop과 state 모두 값이 변경되면 새로운 return값을 만들어서 ui를 만듦. prop vs state (차이점) - prop: 컴포넌트를 사용하는 외부자를 위한 데이터 - state: 컴포넌트를 만드는 내부자를 위한 데이터 hook function App() { const mode = "Welcome"; //이 부분 const topics = [ {id:1, title:'html', body:'html is ...!'}, {id..

컴포넌트 (component) react는 사용자 정의 태그를 만드는 기술 = react의 본질 정리정돈 → 연관된 것들은 모아서 그룹핑 하는 것 ex. import logo from './logo.svg'; import './App.css'; function App() { return ( WEB html css js Welcome hello, web! ); } export default App; 를 사용자 정의 태그로 만들고 싶다. 정리정돈하고 싶다.↓ //react에서 사용자 정의 태그를 만들 때는 반드시 대문자부터 시작해야 한다! import logo from './logo.svg'; import './App.css'; function Header(){ return WEB } function App..

시작 react를 설치하려면 nodejs가 이미 깔려있어야 함. (이미 있다면 바로 react를 설치 진행하면 됨) #이 사이트가 react 설치하는 페이지 Create React App Set up a modern web app by running one command. create-react-app.dev npx create-react-app my-app → 이때 my-app은 현재 설치하는 폴더의 이름 (ex. 폴더 열기로 설치하고픈 폴더에 들어갔다면 .만 찍으면 됨) ↑ 위의 코드를 이용해 터미널에서 설치하면 됨 다 깔리면 npm start를 이용해 (터미널에 안내됨) 시작하면 끗~ 종료할 때는 ctrl + c를 누르면 된다! 배포 npm run build를 이용하면 build 폴더가 생성됨 np..