INFJ의 취업일기82 4. 조건부 렌더링 특정 조건에 따라 다른 결과물을 렌더링 가장 기본적인 방법은 삼항연산자 사용하는 것 단순히 특정 조건이 true이면 보여주고 그렇지 않다면 숨겨줄 때는 && 연산자를 사용하는 것이 더 간편함 App.js - props 이름만 작성하고 값 설정을 생략한다면 true로 설정한 것으로 간주 isSpecial={true}와 isSpecial은 같 import React from 'react'; import Hello from './Hello'; import Wrapper from './Wrapper'; function App() { return ( ) } export default App; Hello.js - isSpecial값이 true이면 *를 그렇지 않다면 *null을 보여주도록 함 *JSX에서 null,.. 2023. 1. 18. 3. props props를 통해 컴포넌트에게 값 전달하기 App.js import React from 'react'; import Hello from './Hello'; function App() { return ( ); } export default App; Hello.js - 비구조화 할당 문법을 사용해 코드를 간결하게 작성 import React from 'react'; function Hello({ color, name }) { return 안녕하세요 {name} } export default Hello; defaultProps로 기본값 설정 Hello.js import React from 'react'; function Hello({ color, name }) { return 안녕하세요 {name} } Hel.. 2023. 1. 18. 2. JSX 1. JSX 리액트 컴포넌트 파일에서 XML 형태로 코드를 작성하면 Babel이 *JSX를 JavaScript로 변환해줌 *JSX: Javascript XML, 자바스크립트를 확장한 문법으로 리액트 엘리먼트를 생성함 (1) 꼭 닫혀야 하는 태그 - self closing 태그 (2) 꼭 감싸져야하는 태그 - 리액트는 하나의 컴포넌트만 리턴할 수 있기 때문에 하나의 태그로 감싸주어야 함 - Fragment : 이름없이 태그 작성하면 만들어지고 브라우저 상에서 별도의 엘리먼트로 나타나지 않음 2. JSX 안에 자바스크립트 값 사용하기 import React from 'react'; import Hello from './Hello'; function App() { const name = 'react'; ret.. 2023. 1. 18. 1. 리액트 입문 1. 리액트는 어쩌다 만들어졌을까? (1) 배경 - JavaScript를 사용하여 HTML을 제어할 때에는 특정 DOM을 선택 -> 이벤트 발생하면 변화 주도록 설정 - 사용자와의 인터랙션이 자주 발생해 DOM을 직접 건드리면서 작업한다면 코드가 난잡해짐 - 그래서 Ember, Backbone, AngularJS 프레임워크가 만들어져 자바스크립트의 특정 값이 바뀌면 특정 DOM의 속성이 바뀌도록 연결해주어 업데이트하는 작업을 간소화해줌 (2) 리액트의 Virtual DOM - 리액트는 Virtual DOM을 사용해서 이를 가능하게 함 - Virtual DOM은 가상의 DOM으로 메모리에 가상으로 존재하는 JavaScript 객체이기 때문에 속도가 훨씬 빠름 - 리액트는 상태가 업데이트되면 필요한 곳의 U.. 2023. 1. 17. mysql workbench connection warning 문제 해결 나같은 경우는 예전에 mysql을 깔았던 적이 있고, mysql 서버가 mariadb로 연결되어 있어 unsupportedIncompatible/nonstandard server라는 connected문제가 계속 발생했다. (더이상 mariadb 사용하지 않는 상황) 구글링한 결과, 연동이 안되는 부분이 있어 그냥 무시하고 써라(maridb 지울려고 했으나 programfile에 안보임) 등이 있었으나 3306 포트를 죽이고 다시 연결해주는 방법으로 해결했다. 1. 리소스 모니터로 3306 포트의 PID 확인 - 윈도우+R -> resmon.exe 입력 -> 확인 - 네트워크 -> 수신대기포트 -> 포트 3306의 PID 확인 2. 명령 프롬프트로 PID 삭제 cmd(명령 프롬프트) 관리자 모드 실행 ->.. 2022. 11. 3. 이전 1 2 3 4 5 ··· 17 다음 반응형
