React4 [React] 기초 개념 (3) props 하위 컴포넌트한테 properties를 넘겨줄 수 있다. 이때 커스텀한 HTML 속성을 사용한다. Array props 넘기기 대괄호를 이용해서 배열을 넘겨줄 수 있다. 하위 컴포넌트에서 받을 때는 join()과 같은 배열 함수를 이용하여 props에 접근할 수 있다. const ChildComponent = (props) => {props.colors.join(', ')} green, blue, red 기본 props props에 기본 값을 설정할 수 있다. 기본 값을 설정하면 따로 props를 정의하지 않아도 설정해 놓은 값으로 정의된다. 하지만 값으로 null을 전달하면 기본 값이 아닌 null로 정의된다. 예상하는 props를 정의하도록 propTypes를 사용한다. 리액트는 컴포넌트가.. 2023. 4. 16. [React] 기초 개념 (1) 요즘 공부하고 있는 내용들을 오래 기억하기 위해 정리해본다. JSX에서는 class를 정의하기 위해서 class라는 단어를 사용하지 않고 className이라고 쓴다. 모든 HTML 속성에 대한 JSX의 네이밍 컨벤션은 카멜표기법으로, onclick 은 onClick, onchange는 onChange로 쓴다. HTML에서 self-closing tag들이 있는데 (개행을 할때 이라고 쓰거나 이라고 써서 굳이 내용이 없는 태그들은 닫아주지 않거나 스스로 닫는 기능), JSX에서는 모든 요소들이 self-closing tag를 사용할 수 있다. 그리고 반드시 닫아줘야한다. 안됨. 됨. 가능하지만 아무것도 안에 담을 수 없다. 컴포넌트는 React의 핵심이다. React에서 컴포넌츠를 생성하는 2가지 방법이.. 2023. 4. 5. [React] props의 간단 개념 React는 컴포넌트 단위로 쪼개서 구현을 한다. 컴포넌트에서 컴포넌트고 값을 주고 받을때 props를 사용한다. props는 properties의 줄임말이다. 상위 컴포넌트에서 정의를 하고, 하위 컴포넌트에 전달을 한다고 가정하자. /* index.js */ function index(){ return ( ) } 상위 컴포넌트에서 하위컴포넌트의 태그 안에 값을 넣어준다. /*Hello.js*/ function Hello(props){ const name = {props.name}; console.log(name); } 하위 컴포넌트는 괄호() 안에 props으로 값을 받아온다. props이 아닌 name으로 받아와도 된다. (여기에서 name인 이유는 상위 컴포넌트에서 Hello 태그 안에 name을 .. 2023. 3. 12. [intelliJ] 터미널 열기 + spring boot에 react 넣기 ... 안녕하세요 여러분. 오늘부터 개인 프로젝트 하나를 만들어서 연습할까 합니다. 고민고민 하다가, spring boot + react로 결정했습니다. 많은 분들이 backend와 frontend를 따로 생성하고, API로 연결을 하는 방법을 사용하던데요. 저는 연습용이기 때문에 하나의 프로젝트에 만들 생각 입니다. spring boot 생성 후, react를 넣으려고 했는데 terminal을 여는법이 뭔지.. 또 검색했습니다. 이렇게 열어주면 됩니다. 그리고 당당하게 [project 이름] \src\main 폴더로 이동하여 create-react-app [project이름] 명령어를 쳤습니다. 아.. 프로그램을 다운 받아야 하는군요. npm install -g create-react-app 명령어를 쳐줍니다.. 2022. 1. 19. 이전 1 다음
