Rosie

react-dom.development.js:86 Warning: validateDOMNesting(...): cannot appear as a descendant of 에러는 tag를 감싸는 tag가 tag 일 때 발생하는 tag입니다. 감싸는 tag를 찾아서 로 바꿔주면 해결됩니다. ◡̈

우선 onClick에 넣을 두 개의 함수를 선언합니다. const [counter, setCounter] = React.useState(1); const [sum, setSum] = React.useState(0); const onCount = () => { setCounter((current) => current+1); } const onSum = () => { setSum((current) => current+1); } tag 안에 onClick 속성을 아래와 같이 넣어주면 {onCount(); onSum();}}>Button 두 개의 기능을 하는 버튼을 생성할 수 있습니다. ◡̈

리액트(React)에서 텍스트 줄바꿈을 어떻게 해야할지 고민을 오래했는데 생각보다 쉽네요 ... 우선 원하는 tag를 사용해서 문구를 넣어줍니다. Hello World! 줄바꿈을 원하는 부분에 tag를 넣어줍니다. Hello World! 줄바꿈이 잘 되는 것을 확인할 수 있습니다. ◡̈

React에서 Link 컴포넌트를 사용하면 밑줄이 생깁니다. function Start() { 테스트 시작하기 } Link 컴포넌트의 밑줄을 제거하고 싶으면 아래와 같은 CSS를 이용하면 됩니다. function Start() { const style={ textDecoration: 'none', color: 'white' } return ( 테스트 시작하기 ); } 이렇게 Link 컴포넌트를 원하는대로 꾸밀 수 있습니다. ◡̈

props는 속성을 나타내는 데이터입니다. props를 인자 값으로 받는 함수형 컴포넌트를 하나 만들어 줍니다. function Component(props) { if (props.value===10) { return The number is 10.; } return null; } props.value에서 value는 속성 이름입니다. 아래 코드에서 value 속성에 값을 할당시켜 줍니다. function Question() { const [counter, setCounter] = React.useState(1); return ( ); } counter의 값이 1이기 때문에 return 값은 null이 되지만, 초기값을 9로 바꿔주면 return 값이 생깁니다. ◡̈

Styled-components란? id나 class를 사용하지 않고 동일한 컴포넌트에서 컴포넌트 이름을 쓰듯 스타일을 지정할 수 있으며, React 프레임워크를 대상으로 하는 CSS-in-JS 라이브러리 중 하나입니다. ① yarn 설치 $ npm install -g yarn styled-components를 설치하기 전에 yarn을 먼저 설치해줍니다. ② styled-components 설치 npm install --save styled-components 다음으로 styled-components를 설치합니다. ③ 파일 import import styledComponents from 'styled-components'; styled-components를 적용하고 싶으면 파일을 import 해줍니다. ◡̈

React(리액트)에서 변수는 return 위에서 생성됩니다. function Question() { return ( Question ); } 아래와 같이 변수를 선언합니다. const str1="Hello" const str2="1" let num = 1 function Question() { const count = 0 return ( Question {count} ); } let 타입은 선언 이후에 값이 변할 수 있음을 의미합니다. (const는 선언 이후에 값이 변할 수 없습니다!) 변수에 목적에 맞게 타입을 지정해서 변수를 정의해주면 됩니다. function Question() { let count = 1 return ( Question {count} ); } 변수를 사용할 땐 {중괄호}에 변수..

React에서 사진을 올리고 싶을 땐 tag로 쉽게 올릴 수 있습니다. alt는 이미지를 보여줄 수 없을 때 대체될 수 있는 텍스트를, src에는 올리고싶은 이미지의 경로를 입력해 주시면 됩니다. ⚠️ 주의해야 할 점 ⚠️ 이미지의 경로를 조심해야 됩니다. ① 이미지의 경로가 React을 생성할 때 생기는 public 폴더 밑에 존재해야 됩니다! ② /images/duck.mp4로 파일의 위치를 설정해줘야 됩니다. images 앞에 경로가 어떻든 신경써주지 않아도 된다는 의미입니다. ↓↓↓ 동영상 업로드 하기 ↓↓↓ https://yyyeji.tistory.com/385 [React] 리액트(React)에서 동영상 삽입하기 리액트(React)에서 영상을 삽입하는데 조금 오래 걸렸던 것 같아서 정리를 해볼..