본문 바로가기
728x90
반응형

Programming44

8. Component styling 새로운 프로젝트를 만들자. yarn create react-app styling-react CSS CSS 클래스가 중복되지 않게 만들기 위해서 1 ) 이름을 지을 때 특별한 규칙을 사용하여 짓거나 2 ) CSS Selector를 활용할 수 있다. 그 중 BEM Naming은 해당 클래스가 어디에서 어떤 용도로 사용되는지 명확하게 작성하는 방식이다. css Selector를 사용하면 CSS 클래스가 특정 클래스 내부에 있는 경우에만 스타일을 적용할 수 있다. 예를들어 .App .logo{ }는 App의 logo에만 스타일이 적용된다. Sass(Syntactically Awesome Style Sheets) CSS 전처리기로 복잡하 작업을 쉽게 할 수 있도록 해주고, 스타일 코드의 재활용성을 높여주고, 코드.. 2022. 3. 8.
7. Hooks useState 기본 sate 사용 예제 - App.js import Counter from './Counter'; const App = () => { return ; }; export default App; - Counter.js import {useState} from 'react'; const Counter = () =>{ const [value, setValue] = useState(0); return( 현재 카운터 값은 {value} 입니다. setValue(value + 1)}> +1 setValue(value - 1)}> -1 ) } export default Counter; 여러개의 state 사용하기 -App.js import Info from './Info'; const App = ().. 2022. 3. 6.
6. component의 lifecycle method 모든 컴포넌트의 수명은 렌더링 되기 전인 준비 과정 ~ 페이지에서 사라질 때 까지이다. lifecycle method는 class형 컴포넌트에서만 사용할 수 있고 함수형 컴포넌트에서는 hook을 사용한다. lifecycle method 종류 - will 접두사가 붙은 메서드 : 어떤 작업을 작동하기 전에 실행 - did 접두사가 붙은 메서드 : 어떤 작업을 작동한 후에 실행 lifecycle - mount : 페이지에 컴포넌트가 나타남, DOM이 생성되고 웹에 나타난다 constructor : 컴포넌트를 새로 만들때마다 호출되는 클래스 생성자 메서드 getDerivedStateFromProps : props에 있는 값을 state에 넣을 때 사용하는 메서드 render : 우리가 준비한 UI를 렌더링 c.. 2022. 3. 6.
5. 반복적으로 Component 사용하기 예제 1 - App.js import { Component } from 'react'; import './App.css'; import IterationSample from './IterationSample'; class App extends Component { render(){ return( ); } } export default App; 아래와 같이 반복되는 배열이 있다고 할 때, map을 사용해서 코드를 배열로 작성할 수 있다. - IterationSample.js const IterationSample = () =>{ return( // 반복적으로 li생성 눈사람 얼음 눈 바람 ) } export default IterationSample; const IterationSample = () =>{.. 2022. 3. 5.
4. ref:DOM에 이름 달기 일반 HTML에서 DOM요소에 이름을 달 때는 id를 사용하는데 리액트 프로젝트 내부에서도 ref를 통해 DOM에 이름을 달 수 있다. 리액트 컴포넌트에서 id를 사용하지 않는 이유는 컴포넌트를 반복적으로 사용하기 때문에 중복 id를 가진 dom이 여러 개 생기는 것을 방지하기 위해서이다. ref는 특히 'DOM을 꼭 직접적으로 건드려야 할 때' 사용해야 한다. 우선 state로 다음 기능을 구현해보자. - App.js import './App.css'; import ValidationSample from './ValidationSample'; function App() { return }; export default App; - ValidationSample.js import React, { Compo.. 2022. 3. 5.
3. 이벤트 핸들링 Event 사용 시 주의사항 - 이름은 카멜 표기법으로 작성한다 ex ) onClick - 이벤트에 실행할 함수 형태의 값을 전달한다 - DOM 요소에만 이벤트를 설정할 수 있다 ( div, button, input, form, span 의 DOM요소에는 이벤트 설정 가능 / 직접 만든 컴포넌트에는 자체 설정 불가능 ) -- MyComponent에 onClick을 설정하면 함수를 실행하는게 아니라, props를 MyComponent에 실행해준다 -- 그래서 전달받은 props를 컴포넌트 내부의 DOM이벤트로 설정한다 -- 이벤트 종류 : Clipboard, Touch, Composition, UI, Keyboard, Wheel, Focus, Media, Form, Image, Mouse, Animatio.. 2022. 3. 5.
2. 컴포넌트 여러 곳에서 한 객체가 반복적으로 사용될 때, component화 한다. Component without Props - App.js import './App.css'; import FirstComponent from './FirstComponent'; function App() { return }; export default App; - FirstComponent.js const FirstComponent = () =>{ return component } export default FirstComponent; 만약 App.js(parent)에서 FirstComponent.js(child)로 변수(props)를 전달한다면 이를 child가 반영하여 parent로 다시 전달해줄 수 있다. Component .. 2022. 3. 4.
1. React 시작하기 일하면서 react.js 를 사용할 기회가 생겼는데 기본적 개념 학습이 필요하다고 생각되어 [리액트를 다루는 기술]과 기타 자료를 통해 학습하고자 한다. - node.js , npm 설치 완료 - vsCode 환경 2022. 3. 4.
f-string python 3.6 이상부터 지원하는 기능이다. x = 10 y = 3 # 기존 사용 버전 ## Use %-formatting 'x + y = %d | x * y = %d' %(x+y, x*y) >>> 'x + y = 13 | x * y = 30' ## Use str.format() 'x + y = {} | x * y = {}'.format(x+y, x*y) >>> 'x + y = 13 | x * y = 30' # f-string f'x + y = {x+y} | x * y = {x*y}' >>> 'x + y = 13 | x * y = 30' 2021. 5. 31.
입출력과 변수 IDE : Visual Studio 기초 문법 1 ) 입출력 입력 : scanf("저장형식", 포인터) 출력 : printf("저장형식", 출력변수) 2 ) 형식 %d : 정수, %f : 실수, %g : 지수, %c : 문자 1개, %s : 문자열 정수형 - char(1byte), short(2byte), long(4byte), long long(8byte), int(시스템에 따라 자동 결정) 실수형 - float(4byte), double(8byte) unsigned, signed : 저장하는 과정에서 -값을 사용하기 싫으면 unsigned 를 사용하면 된다. void : return 값이 없는 함수의 자료형 bool : 참, 거짓을 저장함 3 ) sizeof sizeof(int), sizeof(cha.. 2021. 5. 10.
728x90
반응형

티스토리툴바