React

보호되어 있는 글입니다.

useState 를 사용하여 버튼 클릭시 1씩 증가시키기 let num =1; const add =() =>{ num++ console.log('add',num); } return ( 숫자: {num} 더하기 ); } export default App; 위의 코드를 보면 num 변수를 정의하여 함수에 num++ 로 하나씩 증가하도록 하였다. 일반적인 변수는 랜더링시점에 대해 리액트가 알지 못하기 때문에 상태값을 변경해야 한다. let num = 1; 의 구문을 주석처리 하도록 하겠다. useState - react안에 hooks 라이브러리를 사용한다. //let num =1; const [num, setNum] = useState(1); //react안에 hooks라이브러리 사용 const add =()..

불변함수 -> 깊은 복사 함수 1. spread (전개) 연산자 2. concat (추가하기) 3. filter 걸러내기 (삭제시 사용) 4. slice 잘라내기 5. map 1. 스프레드(전개) 연산자 [...a]를 사용하면 배열을 복사한다. b의 값에 4를 넣고 확인을 해보았다. 이런식으로 복사해서 추가하는데 사용할 수 있다. 결과값 2. concat (추가하기) a2에 4를 추가한 값이 b2에 들어간다. - 깊은 복사 만약 a2.concat(4) 이 아닌 a2.push(4)를 할 경우에는 b2의 값은 4만 출력된다. 3. filter 걸러내기 (삭제시 사용) const b3 = a3.filter((n) => { return n != 1; }); filter 안에는 함수가 들어간다. ( )=>{ };..

1. return 시에 하나의 DOM만 리턴할 수 있다. 하나의 태그만 리턴을 해준다. 위의 그림에서 보면 노랑밑줄이 그어져있는 코드를 보자 태그가 2개가 있어서 리턴이 안되는 것을 볼 수 있다. 아래의 그림에서 보듯이 하나의 태그안에 넣어주면 가능하다. 또 주의해야할 점이 하나의 태그안에 코드를 넣는다고 하더라도 리턴이 두개 이상이 되면 에러가 발생한다. 즉, 리턴시에 하나의 DOM만 리턴할 수 있다. 2. 변수 선언은 let 혹은 const로만 한다 var 변수는 함수 안에서 선언이 되면 보통 함수안에서만 사용이 된다고 알고있다. 그런데 함수 밖에서도 사용이 되는 스코프가 변칙적이기 때문에 가능하면 var 함수를 사용하지 않고 let 과 const 로 사용을 하는 것이 이상적이다. let 은 변수를 ..

Node.js는 경량의 프레임워크로 React로 만들어진 스태틱 서버 렌더링 애플리케이션 기본적으로 스타일링과 라우팅 해결책을 가지고 있으며, 사용자가 Node.js를 서버 환경으로 사용 node.js 설치 3. npx 설치 vscode 연동 npm -> 라이브러리를 다운 - 빌드 -> 프로젝트3개 (로컬에 다 다운) npx -> 라이브러리를 다운 - 빌드 -> 프로젝트 3개 (다운 받은 걸 재사용, 없으면 다운) -> 실행 -> 삭제 npx npx create-react-app my-app cd my-app npm start 서버를 키면 크롬창에 아래와 같이 나오면 제대로 서버가 작동하는 것이다. 문법오류확인 react 문법 자동완성기능 .prettier 파일 만들기 설정에서 format on save..