반응형 React,Node,JQuery,js54 [React 따라하기 #16] React sass @extend sass @extend extend 는 기존에 정의한 스타일을 그대로 사용할 때 씁니다. 예제 sass /* 이미 정의된 스타일을 */ .tab-default { padding: 10px; text-align: center; text-weight: bold; } .tab-select { @extend .tab-default; /* @extend 로 그대로 가져다가 씀 */ color: red; } .tab-unselect { @extend .tab-default; /* @extend 로 그대로 가져다가 씀 */ color: gray; } 컴파일 후에 css 는 아래와 같이 나옵니다. .tab-default, .tab-select, .tab-unselect { padding: 10px; text-align.. 2020. 1. 3. [React 따라하기 #15] React sass @mixin @mixin 과 @include css 의 프로퍼티들의 묶음이라고 보면될거같습니다. 예를 들어 scss 에서 @mixin tab-text{ color: red; font-size: 20px; font-weight: bold; background-color: gray; } 이렇게 정의하고 사용할 때는 @include 를 사용합니다. .tab_select { @include tab-text; background-color: green; } 이렇게 사용합니다. css로 변환되면 아래와 같이 됩니다. .tab_select { color: red; font-size: 20px; font-weight: bold; background-color: gray; background-color: green; } 중복되는 c.. 2020. 1. 3. [React 따라하기 #14] React sass sass 는 css 의 pre-processor 입니다. npm 이나 yarn 으로 설치합니다. cmd 에서 // yarn 으로 설치 c:\your_project>yarn add node-sass // 또는 npm 으로 설치 c:\your_project>npm install node-sass 확장자는 scss 입니다. sass_test.scss $textColor: yellow; $bgColor: white; h1 { color: $textColor; } .someClass { color: $textColor;// 중복되는 value 를 한번에 변경 가능. background-color: $bgColor; } 위에서 보듯이 syntax 는 $variableName: value; 이렇게 작성하고 impor.. 2020. 1. 3. [React 따라하기 #13] React 에서 css 적용하기 React CSS 크게는 inline styling 과 .css 파일을 이용하는 방법이 있습니다. - inline styling 이용 class MyJob extends React.Component { render() { return ( Hello Style! ); } } html 에서 tag 안에 직접 style= 로 입력하는 것처럼 합니다만 {} 로 감싸고 안에는 json 형식입니다. camelCased property names 를 사용합니다. ( 단어단위이고 시작은 소문자, 그 후 단어의 첫 알파벳은 대문자 ) Html 에서 background-color 였다면 react 는 backgroundColor font-family 는 fontFamily - javascript object 이용 clas.. 2020. 1. 3. [React 따라하기 #12] React Form HTML 의 form 과 같습니다. 예제. See the Pen form01 by Seunggeun Oh (@seunggeun-oh) on CodePen. 여기서 이건 외워야 합니다. WebStorm 이나 VSCode 는 . 찍거나 ctrl+space 하면 뒤에 힌트가 나오긴하지만, 그래도 어느정도는 알고 있어야 선택도 하겠죠. event.target.value event.target 은 입니다. 그것의 value 입니다. 여러개의 input See the Pen form02 by Seunggeun Oh (@seunggeun-oh) on CodePen. 여기서 외울건 myChangeHandler() 에 있는 this.setState({[name]: val}); 이렇게 변수에 state 의 변수명칭이 있을.. 2020. 1. 2. [React 따라하기 #11] React Event 리액트 이벤트 React 에서도 HTML 과 같은 이벤트를 사용합니다. click, change, mouseover등 대신 camelCase Syntax로 써야합니다. ( 단어단위로 대문자 시작 ) html 과 비교해보면 HTML : action! React : action! // doAction 이라는 function 이 있다면 기본적인 이벤트 사용 class Robot extends React.Component { render(){ return ( Action! ) } doAction(){ alert("ok"); } } ReactDOM.render(, document.getElementById("root")); 버튼을 클릭하게 되면 "ok" alert 이 뜹니다. doAction 안에서 this 를 Bind 하고 .. 2020. 1. 2. [React 따라하기 #10] React 기본 함수 (life cycle) Mounting, Updating, Unmounting. - Mounting Dom 으로 elements를 넣는것 이라고 설명되어있는데, 간략히는 화면에 나타날 때 라고 생각해도 될거같습니다. 여기에 속하는 메소드로는 constructor() 생성자로 class 생성 시 호출 옵션 getDerivedStateFromProps() render() 호출 전 옵션 render() DOM 에 html 내보냄 필수 componentDidMount() render() 호출 후 옵션 render 는 반드시 작성해야합니다. 나머지는 정의하지 않으면 호출되지 않습니다. 만약 모두 정의했다면 표에 나온 순서대로 실행되게 됩니다. 예제로 보시죠. webstorm 으로 만들었던 프로젝트에서 src 아래에 js 파일을 하나 만.. 2020. 1. 2. [React 따라하기 #9] React State React State state 는 컴포넌트가 갖고있는 object 입니다. state 가 변경되면, 컴포넌트는 다시 랜더합니다. state 를 사용하려면 constructor 에서 속성을 초기화 해야 합니다! 그래야 사용할 수 있어요. 아래 예제에 render 안에서 this.state.gender 는 사용가능, this.state.footsize 는 불가능합니다. 역시 예제로 알아보는게 좋겠죠. class Hello extends React.Component { constructor(props) { super(props); this.state = { gender: "man", tall: "181", weight: "80" }; } render() { return Hello {this.props.nam.. 2019. 12. 31. [React 따라하기 #8] React Props React Props 위치는 html tag 의 attribute 처럼 보입니다. Props 는 읽기전용입니다. 값을 바꿀 수 없습니다. this.props.name = 'ok google'; 하면 오류! See the Pen test1 by Seunggeun Oh (@seunggeun-oh) on CodePen. 결과는 Hello bryan! 만약에 props 명이 일치하는게 없다면 어떻게 될까요? 위 codepen 에서 로 바꾸면 결과는 Hello ! 오류는 아니고 그냥 empty 공백으로 나옵니다. - 파라메터로 props 값 전달. See the Pen RwNZOpy by Seunggeun Oh (@seunggeun-oh) on CodePen. 선언은 var, let, const 가능합니다만 변경.. 2019. 12. 30. [React 따라하기 #7] React Components(컴포넌트) 참조하기 React Components 참조하기 다른 컴포넌트들을 참조하는 방법입니다. - 컴포넌트안에 다른 컴포넌트를 포함 See the Pen KKwXPVg by Seunggeun Oh (@seunggeun-oh) on CodePen. 다른 class 를 갔다 쓰시면 됩니다. 여러번 재사용 가능합니다. - 다른 파일(.js) 에 있는 컴포넌트를 포함 위와 비슷한데 단지 class 선언을 다른 js 파일에 한것을 가져오는 방법입니다. import 를 하면 됩니다. 웹스톰에서 생성 프로젝트(hello-world)에서 src 폴더 아래 HelloFile.js 파일을 하나 생성합니다. // HelloFile.js import React from 'react'; class Hello extends React.Compo.. 2019. 12. 30. 이전 1 2 3 4 5 6 다음 728x90 반응형
