수빈이의 개발새발

[React] 리액트 State? (+예제코드) State? state란 계속해서 변화하는 특정 상태를 말한고 상태에 따라 각각 다른 동작을 한다 보통 리액트에서 동적인 데이터는 변수에 담아 사용하지 않고 useState라는 react hook 중 하나인 리액트 메서 su-vin25.tistory.com 이어서... Props? properties 프로퍼티의 줄임말이다. 부모 컴포넌트가 자식 컴포넌트에 값을 전달할 때 사용한다.(단방향 데이터 흐름) props는 간단하게 함수의 매개변수처럼 컴포넌트에 전달되는 값이라고 보면 쉽다 바로 예제로 들어가 보자 Props 예제 젤 상위 루트 컴포넌트인 App.js 에서 자식 컴포넌트인 Counter.js에게 prop이란 이름을 붙여 5를 전달해 보자 counte..

State? state란 계속해서 변화하는 특정 상태를 말한고 상태에 따라 각각 다른 동작을 한다 보통 리액트에서 동적인 데이터는 변수에 담아 사용하지 않고 useState라는 react hook 중 하나인 리액트 메서드를 사용한다 이론적인 설명보다 코드로 보는게 이해가 빠르니 바로 예제로 들어가 보자 State 예제 1. useState 세팅 state를 실습해 보기 위해 +버튼을 누르면 1씩 증가되고 -버튼을 누르면 1씩 감소되는 Couter 컴포넌트를 만들어보자 루트 컴포넌트에 임포트 하면 이렇게 렌더링 된다! 일단은 아무 기능 없는 깡통인 상태 여기서 상태가 변화해야 할 부분은 무엇일까? 바로 h2태그로 감싸져 있는 0으로 초기화되어있는 숫자 부분이다 React의 state 기능을 사용하기 위해선..

[React] React.js란 무엇일까? 기초부터 간단정리 들어가기 전에.. 프레임워크? -frame은 "틀" work은 "일하다"라는 뜻이다 이 뜻대로 틀대로 일하는 것이라고 볼 수 있다 즉 제공되는 일정한 요소와 툴, 규약을 가지고 무언가를 만드는 것이 프레임 su-vin25.tistory.com 이전 포스팅에서 리액트에 대해 이해했다면 바로 실전으로 들어가보자! chap 1 : 새로운 폴더 만들기 자기가 만들고 싶은 위치에 새로운 폴더를 만들어 준다 chap 2 : create-react-app vscode 터미널을 이용해 만든 폴더로 이동해주고 npx create-react-app 폴더이름을 입력해 준다 여기서 npx는 설치하지 않은 패키지를 한 번만 쓰고 싶을 때 사용하는데 이를 쓰기 위해선 ..

들어가기 전에.. 프레임워크? -frame은 "틀" work은 "일하다"라는 뜻이다 이 뜻대로 틀대로 일하는 것이라고 볼 수 있다 즉 제공되는 일정한 요소와 툴, 규약을 가지고 무언가를 만드는 것이 프레임워크이다 웹프레임워크는 웹프로그램을 개발하기 위해 사용되는 툴을 제공하는 프로그램이라고 보면 된다 Node.js 란? Node를 React를 배우기 전에 알아둬야 하는 이유는 간단하다 React가 JS의 라이브러리이기 때문이다그렇기 때문에 JS가 어디서 어떻게 동작하는지를 알아야 한다 본래 JS는 웹브라우저에만 실행되어야 했다. 그러나 chorm의 JS의 실행하는 엔진인 V8엔진이 C++로 만들어졌기 때문에 톡 떼와서 브라우저가 아닌아무 곳에서나 사용가능하게 만들 수 있었다 이것이 Node이다. 즉 No..

1. indexOf(찾는문자, from index) indexOf() 는 간단하게 내가 찾고싶은 문자열의 index를 반환해준다. String str ="010-1234-5678"; str.indexOf("-") // 3 ※ 주의할 점은 같은 문자가 여러 개 있어도 처음 찾은 문자의 index만 반환한다. 만약 뒤에 있는 "-"를 반환하고 싶다면 String str ="010-1234-5678"; str.indexOf("-",4) // 8 3번 index에 "-"가 있었으니 3번 이후인 4번 index를 넣어주면 4번 index부터 내가 찾는 문자를 찾아준다. 2. substring(start index, end index) end index는 생략 가능하다 .. String str = "가나다라마바사"..