Front-end/React.js6 [React.js] Props props는 컴포넌트에 데이터를 전달하는 방법이다. App 컴포넌트에서 counter컴포넌트로 데이터를 전달하고 이를 사용해보자. prop 전달하기 이렇게 객체 안에 전달 할 값을 넣어준다.() 그럼 counter.js에서는 이런식으로 매개변수로 값을 받아서 사용하면 된다. prop는 여러개를 해도 되는데 이럴 때는 점표기법을 사용한다.(props.initialValue) 위와 같이 여러개의 prop를 전달할 때에는 가독성이 떨어진다. 그래서 이런 식으로 spread를 사용해서 전달한다. 이때 counter.js에서 위와 같이 매개변수를 설정하면 props에서 a만 받겠다는 의미이다. 기본 props값 설정하기 만약 받은 매개변수에서 원하는 prop이 나오지 않았다면 이 때 사용할 기본값을 지정해야한다... 2023. 8. 13. [React.js] State 사람은 배고픔, 적당함, 배부름 상태를 번갈아 유지하고, 이 상태에 따라 다른 행동을 수행한다. state도 마찬가지로 계속해서 변화하는 특정 상태를 의미하고, 상태에 따라 각각 다른 동작을 한다. counter 만들기 우선, counter.js파일을 새로 만든다. 그 다음 App.js파일을 위와 같이 수정하면 이런 화면이 완성된다. 현재는 버튼을 눌러도 아무런 설정을 하지 않았기 때문에 반응이 없다. 여기서 숫자가 변해야 하므로 숫자를 하나의 상태로 생각할 수 있다. counter.js에 위와 같이 리액트와 usestate를 import 한다. 그 다음 const [상태명, 새터함수] = useState(초기값) 을 이용해서 상태를 만든다. 그 다음 숫자가 들어갈 자리에 state를 넣어준다. ({상태.. 2023. 8. 13. [React.js] JSX 리액트는 위와 같이 기능들을 컴포넌트로 분할해서 재사용할 수 있다. 컴포넌트 만들기 src 폴더에 위 사진과 같이 MyHeader.js파일을 만든다. 그 다음 위와 같이 입력합니다. 주의할 점은 컴포넌트에서 꼭 리턴하는 값이 있어야 한다는 것입니다. 그 다음 App.js에 들어가서 위와 같이 import 한 후 코드에 MyHeader 컴포넌트를 추가합니다. 그럼 위와 같이 컴포넌트가 화면에 표시되는 것을 볼 수 있습니다. jsx문법 닫힘규칙 태그가 열리면 무조건 닫는 태그가 있어야한다. 태그가 하나이면 와 같이 바로 닫는 방법도 있다. 최상위태그 컴포넌트를 만드려면 반드시 최상위태그가 있어야한다. 최상위태그를 두고싶지 않다면 이렇게 리액트를 import하고 React.Fragment를 이용해서 최상위태그.. 2023. 8. 11. [React.js] Create React App 리액트를 다룰 때 다운받고, 관리해야 하는 패키지들이 많다. 그래서 이미 세팅 완료된 패키지인 Boiler Plate를 사용할 것이다. 리액트 어플리케이션 만들기 1. 새로운 폴더를 만든다. 2.터미널을 이용해서 리액트 프로젝트를 설치한다. 방금 만든 폴더를 vscode에 열고, 터미널을 연다. 설치되어있지 않은 패키지를 딱 한번만 쓰고싶을 때 사용하는 도구인 npx를 사용할 것이다. 이와 같이 npx -v를 명령어로 입력하여 버전이 출력되면 설치가 정상적으로 되어있는 것이다. 만약 설치가 되어있지 않다면 , npm install -g npx 를 통해서 설치하면 된다. 리액트 프로젝트를 생성하기 위해 npx create-react-app [프로젝트명] 명령어를 입력한다. 나는 여기서 밑에와 같은 에러가 .. 2023. 8. 11. [React.js] React가 필요한 이유 1.컴포넌트화 방식 중복코드를 수정해야 할 상황이 생겼을 때 하나하나 일일히 수정하기에는 어려움이 있다. 리액트는 재사용해야하는 요소들을 컴포넌트 방식으로 사용할 수 있다. 이를 컴포넌트화 방식이라고 한다. 이 방식을 사용하면 중복코드를 수정할 때 용이하다. 2.선언형 프로그래밍 +버튼을 누르면 화면의 숫자가 증가하고, -버튼을 누르면 감소하는 프로그램을 만든다고 하자. 명령형 프로그래밍 방식으로 만들었을 때는 1.결과를 표시할 요소를 가져온다 2.현재 결과값을 숫자형으로 바꾼다. 3. +라면 더해서, -라면 빼서 다시 상수에 값을 넣는다. 선언형 프로그래밍 방식으로 만들면 1. +를 누르면 ,result값에 +1을 하고 minus를 누르면 반대로 한다. 선언형 프로그래밍이 훨씬 간단하다. 리액트는 선언.. 2023. 8. 9. React란 무엇일까 react는 자바스크립트의 UI라이브러리이다. react 배우는 방법 Javascript -> Node.js -> React.js 2023. 7. 7. 이전 1 다음
