STUDY66 [React 기초] map : 많은 div들을 반복문으로 줄이고 싶다면 자바스크립트 map 함수 사용하는 법모든 array 자료 우측에는 map() 함수를 붙일 수 있다. 기능 1. array에 들어있는 자료 개수만큼 그 안에 있는 코드를 반복 실행한다.위의 그림에서 console.log(1)이 3번 실행된 것을 확인할 수 있다. 기능 2. 콜백함수에 파라미터를 작성하면 그 파라미터 array 안에 있던 모든 자료를 하나씩 출력해 준다.콘솔창에 2, 3, 4가 출력된 것을 확인할 수 있다.(소괄호 안에 있는 함수를 콜백함수라고 한다) 기능 3. return 내용을 적으면 array로 담아 준다.콘솔창에서 실행해 보면 array 안에 'abcde'가 들어간 것을 확인할 수 있다. 변수에 담아서 확인해 봐도 된다. JSX 안에서 html을 반복 생성할 때는 map() .. 2024. 8. 2. [React 기초] Component : 복잡한 html을 한 단어로 축약하고 싶다면 / 동적인 UI 만들기(모달창) 들어가기 전에html 코드를 짤 때 유의해야할 점이 있다.return() 안에는 병렬로 태그 2 개 이상 기입 금지. 하나의 태그로 시작해서 하나의 태그로 끝내야 한다.그래서 두 개를 나란히 적고 싶으면 아래 같이 하나의 div로 또 감싸거나 해야 한다.이렇게 의미 없는(필요 없는) 를 사용하기 싫으면 로 감싸도 된다.이걸 fragment문법이라고 한다. 복잡한 html을 한 단어로 한 단어로 치환할 수 있는 Component 문법리액트에는 복작한 html, 많은 div들을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법을 제공하는데, 이것을 Component라고 한다. Component 문법을 이용하면 함수나 변수를 만드는 것처럼 html을 한 단어로 치환해서 원하는 곳에 넣을 수 있다. 이러면 .. 2024. 8. 2. [React 기초] state, {useState}, useState() 함수 들어가기 전에return() 안에는 병렬로 태그 2 개 이상 기입 금지.하나의 태그로 시작해서 하나의 태그로 끝내야 한다. 리액트에서 자료를 잠깐 저장할 때에는 변수를 사용하고 html에 {데이터바인딩}도 할 수 있다. 하지만 중요한 데이터를 저장할 때에는 변수 대신 state를 사용한다. State란?- 변수 대신 쓰는 데이터 저장 공간.- useState()를 이용해 만들어야 한다.- 문자, 숫자, array, object, boolean 전부 저장 가능하다.- 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 한다.(state가 변경될 경우 component가 재렌더링 되기 때문에 렌더링,데이터 흐름에 사용되는 값을 포함하면 불필요한 렌더링이 발생해 성능을 저하시킬 수 있음) .. 2024. 8. 1. [React 기초] JSX 문법 - className, 데이터 바인딩 {중괄호}, inline style JSX란?- 문자열도HTML도 아닌 JavaScript에서 XML을 추가, 확장된 문법이다.- React로 프로젝트를 만들 때 사용한다.- JavaScript의 모든 기능이 포함되어 있다. JSX를 사용하는 이유React에서 를 만들려면 React.createElement('div', null, 'Hello World')로 길게 작성해야 한다.하지만 JSX를 사용하면 로 작성하면 된다. JSX 문법 1. HTML에 class 넣을 때는 className html에서 태그에 class를 추가할 때에는 위와 같이 사용하지만, React JSX 분법에서는 아래와 같이 사용해야 한다. import logo from './logo.svg';import './App.css';function App(){ retur.. 2024. 7. 30. [React 기초] React 시작하기(설치/개발 환경 세팅/프로젝트 생성) 1. 리액트(React)란?페이스북(Facebook)에서 개발한 오픈 자바스크립트 라이브러리.2. 리액트(React)를 사용하는 이유1. Single Page Application을 만들 때 사용한다. - 하나의 페이지에서 모바일 앱처럼 부드럽게 동작하는 HTML 페이지를 만들고 싶을 때 React 라이브러리를 사용한다.2. HTML 재사용이 편리하다. - 큰 프로젝트에서 html 관리, 재사용이 편리해진다.3. 비슷한 문법으로 앱 개발이 가능하다. (React Native) 사실 React는 HTML, CSS, JavaScript를 이용한 웹 개발을 편리하게 해 주는 도구이다. HTML, CSS, JavaScript를 알고 있어야 한다. 3. 리액트(React) 설치/개발 환경 세팅1. N.. 2024. 7. 30. 블렌딩 모드 ㅂNormalDissolve - 모래알 흩뿌린 것처럼 나타냄(노이즈와 비슷), 투명도와 병행해서 사용해야 함 [어둡게] - 어둡게 합성, 밝은 부분은 투명하게 처리DarkenMultiply - [어둡게] 그룹의 대표, 하위 레이어와 섞이지 않음, 이미지 따야할 때 많이 사용Color Burn - 어둡게 합성해야 하는 경우에 색상까지 들어가야 할 경우에 사용Linear BurnDarker Color [밝게] - 밝게 합성, 어두운 부분은 투명하게 처리LightenScreen - [밝게] 그룹의 대표, 하위 레이어와 섞이지 않음, 이미지 따야할 때 많이 사용Color Dodge - 밝게 합성해야 하는 경우에 색상까지 들어가야 할 경우에 사용Linear Dodge (Add)Lighter Color [대비] -.. 2024. 7. 29. 이전 1 ··· 3 4 5 6 다음
