React - 리액트를 다루는 기술(1)

Hyeonseok Jeong·2022년 10월 7일
1

React

목록 보기
3/16

오늘부터 부족한 React의 지식을 채우기 위해 기초부분에 대해서 복습하고자 블로그를 작성해본다.

조건부 연산자

상황 연산자는 if문을 JSX 내부의 자바스크립트 표현식에서 사용할 수 없다.
하지만 조건에 따라 다른 내용을 렌더링해야 할 때는 JSX 밖에서 if문을 작성하거나
JSX문에서 자바스크립트 문법을 사용할 수 있도록 해주는 {} 안에서 상황 연산자를 사용하여
조건에 따라 다른 내용을 렌더링 할 수 있다.

  • 조건 연산자의 또다른 이름은 삼항 연산자 이다.
const App = () => {
  const name = "React"
	return {name === "React" ? "React" : null}
}

/* ? 이후에 오는 : 기점으로 전은 조건이 True 일때 후는 False 일때 출력 되는 값이다.
	또한 False 에 담긴 값인 null은 False일때 화면에 렌더링 되는게 없어야 할때 사용할 수 있다. */

AND 연산자

AND 연산자는 조건을 만족할때 내용을 보여주고 조건을 만족하지 못하면 내용을 보여주지 않아야 할때 사용 할 수 있다.

const App = () => {
	const name = "React"
   	 return {name === "React" && "React"}
}

/* AND 연산자로 작성된 해당 함수를 사용할 수 있는 이유는 React 에서는 False가 나오면 렌더링을 할때 
	화면에 출력이 되지 않기 때문이다. (=null 과 같다) */

JSX문에서의 인라인 스타일 적용

JSX문에서 인라인 스타일을 적용하기 위해서는 2가지 방법이 있다.
1. 변수 선언
스타일에 대한 변수를 선언하여 해당 인라인 style 속성에 변수를 적용하는 것이다.
이때 변수에 값으로는 객체로 인라인 스타일을 적어야된다.

const App = () => {
	const ColorAndBorder = {
		color: 'red',
  		border: '1px solid black',
  		backgroundColor: 'blue'
	}
	return <div style={ColorAndBorder}>React</div>
}

/* 위와 같이 객체로 인라인 스타일을 변수로 선언한후에 해당 스타일을 적용할 인라인의 style속성에 JSX문에서
	자바스크립트 문법을 사용할 수 있도록 만들어주는 {}안에 변수명을 적으면 된다.
	(+ 추가로 JSX문법에서는 HTML문법과 같이 background-color와 같은 형식이 아닌 카멜형식으로 작성해야된다.) */
  1. 인라인에 직접 적용
    사실 변수 선언과 크게 다를게 없다 단지 {}안에 변수에 값처럼 객체를 적어주면 된다.
const App = () => {
	return <div style={
    			color: 'red',
      			border: '1px solid black',
      			backgroundColor: 'blue'
    		}>React</div>
}

/* 인라인에서 직접적으로 적을때도 카멜형식으로 스타일의 속성을 적어야된다. */

props

  • props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다.
  1. props의 값은 해당 컴포넌트를 불러와 사용하는 부모 컴퍼넌트에서 설정할 수 있다.
  2. props의 값을 불러오기 위해서는 부모 컴퍼넌트에서 작성한 속성의 명칭을 가지고 와야하는데 가지고 올때는 JSX문에서 자바스크립트 문법을 사용할 수 있도록 해주는 {} 안에 props.속성이름 을 적어야 된다.
/* App컴퍼넌트가 부모 컴퍼넌트이고 dumy컴퍼넌트가 자식 컴퍼넌트라고 가정할때 */
[App.js]
const App = () => {
	return <dummy name={"React is good package"} />
}
    
[dummy.js]
 const dummy = (props) => {
 	return <div>{props.name}</div>
 }
 
 /* 위처럼 props를 사용하기 위해서는 함수의 인자에 props로 부모 컴퍼넌트의 속성의 값을 받아 오는것이다.
 또한 받아온 부모 컴퍼넌트의 속성의 값은 props.name으로 {}안에 적어 사용 할 수있다. */
  1. defaultProps 설정 (=기본 Props값 설정)
[App.js]
const App = () => {
	return <dummy />
}
    
[dummy.js]
 const dummy = (props) => {
 	return <div>{props.name}</div>
 }
 
    dummy.defaultProps = {
   		name: '기본 이름'

/* 위와 같이 name이라는 속성이 부모 컴퍼넌트에 없을 경우에 해당 자식 컴퍼넌트에서 props의 기본값을 설정 해줄 수있다.
props의 기본값을 함수 컴퍼넌트 밖에서 선언해 줘야된다. */
  1. Children 을 이용 props 를 사용 하는 법
[App.js]
const App = () => {
	return <dummy>React</dummy>
}
    
[dummy.js]
 const dummy = (props) => {
 	return <div>{props.children}</div>
 }
 /* 위와 같이 자식 컴포넌트를 부모 컴포넌트에서 JSX문법으로 작성하여 태그 안에 필요한 내용을 적은 후,
 자식 컴포넌트에서 .children을 사용하여 태그사이의 값을 가지고 올 수 있다. */
  1. 비구조화 할당 문법(= 구조 분해 문법)
    비구조화 할당 문법을 통해서 props 내부 값을 추출하여 좀더 간편하게 Props를 사용할 수 있다.
    props의 값을 조회할 때 마다 props.name props.children과 같이 작성 해야되는데 이를 편하게 사용하기 위해서(가독성을 높이기 위해서)
[dummy.js]
const dummy = (props) => {
	const {name, children} = props;
  return 
  	<>
  		<div>{name}</div>
  		<div>{children}</div>
  	</>
}
// 또는
const dummy = ({name, children}) => {
  return 
  	<>
  		<div>{name}</div>
  		<div>{children}</div>
  	</>
}
// 와 같이 비구조 할당 문법을 통해서 미리 props의 값을 조회해서 사용할 수 있다.
  1. propTypes를 통한 props 검증
    propTypes를 사용하면 앞서 언급했던 defaultPtops는 속성의 기본값을 설정해 준다면, propType은 속성의 Type을 설정해 줄 수 있다.
[dummy.js]
import PropType from 'prop-tpes'

const dummy = (props) => {
	const {name, children} = props;
  return 
  	<>
  		<div>{name}</div>
  		<div>{children}</div>
  	</>
}

dummy.propType = {
	name: PropTypes.string
}

/* 위와 같이 컴퍼넌트명.propType으로 객체안에 속성에 대한 Type을 명시하여
	해당 Type이 아닐경우 브라우저에서 경고창이 나오게 된다.
    또한 propType을 사용하기 위해서는 hook을 사용하여 React에 내장된 PropType 컴포넌트를
    꺼내와줘야한다.(import PropType from 'prop-tpes')*/
profile
풀스텍 개발자

1개의 댓글

comment-user-thumbnail
2022년 10월 7일

도움이 많이 되는 글이네요!

답글 달기